0

I'm trying to use inline svgs for a number of logos and icons, and I was considering adding the inline svg code in a preprocess function. This seems like a good place to check for svg support (namely, whether or not it's IE8) and provide a png if needed.

Are there any native Drupal functions available to check for this in a preprocess function? Or should I instead rely on a regex match using $_SERVER['HTTP_USER_AGENT']?

I tried to search here - https://api.drupal.org/api/drupal/functions - but didn't have any luck, so any suggestions or links to other resources would be much appreciated!

Edit: To clarify on what I mean by 'inline svg code' - I want to use actual <svg> and <path> tags, not <img src="example.svg" /> to allow for greater styling control with CSS.

@AyeshK - I agree that there are many pitfalls in user-agent and feature detection, mainly related to keeping an up-to-date library of user-agents and features. In this specific case, SVG seems to have broad support moving forward, and I'd like to only serve the png version of images to those few browsers (within our support matrix) who don't support it, avoiding additional HTTP requests for the many browsers that do. The idea of putting this on the server side comes from Adaptive Web Design / Responsive Design on Server Side (RESS).

1
  • Just to answer your specific question: no, Drupal has no native functions to help you determine the user agent. PHP does, though: php.net/manual/en/function.get-browser.php (the function in the first user-submitted comment is actually a bit easier to use)
    – Clive
    Commented Feb 23, 2015 at 1:28

1 Answer 1

1

No there is no reliable way to detect browsers. Furthermore, you should not check browser compatibility from the server-side.

You have a few alternatives:

  • In your module or theme, add IE-specific styles (hide the SVG, show an image instead, likewise). This is well covered in the handbook page. If you do not need to add the stylesheet to every page, then you can add the stylesheet in your preprocess hook (#attached is recommended. See this and this.)

  • Javascript workaround. Again, checking the user agent is not that easy and fool-proof. You can check SVG compatibility either by using a library available, or just by trying to create an SVG element and see if it work. This and this covers it well.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.