In our quest to find a dependable technique to use SVG’s and PNG’s in our Drupal sites, we’ve experimented with the following approaches:
Our First Approach:
Upload SVG as file, and upload PNG as image. Use fallback javascript for image replacement
Experiment:
1. Since there is no way to upload an SVG as an image type by default in Drupal, we created a file upload of an SVG image in a content type, with a separate PNG image upload. Both SVG and PNG files with matching names (except extensions) were then added to the site’s default image directory.
2. To display the SVG (for SVG compatible browsers), we created a corresponding node.tpl.php file and printed out the file in an image tag.
3. As a fallback, to display the PNG (for browsers that aren’t SVG compatible), we used a javascript solution, SVGeezy (http://benhowdle.im/svgeezy/), which displayed the PNG image version.
The Good Results:
• SVG files displayed fine in compatible browsers
• PNG files displayed fine in non-compatible browsers
The Bad Results:
• The browser has to access the database multiple times to retrieve a lot of SVG files. Assuming this slows down page load time.
• No known way to have PNG images not download when a page is loaded (if not needed). Assuming this slows down page load time.