Experimental project

This is a sandbox project, which contains experimental code for developer use only.

SVG Image Formatter

This module lets you use SVG files in normal image fields or alternatively assign a special inline SVG formatter to a file field that accepts only SVG. It works with Drupal's default image upload widget as long as you add svg to the list of allowed extensions in your field instance settings. SVG Image Formatter extends the default functionality of Drupal Core' image field formatter and also works with File Entity.

I have tested it with both Media 7.1.5 (using a bundled File Entity module) and Media 7.x-2.0-alpha4, although I would recommend the latter as it integrates better with File Entity 2.0 and is better supported.

For browsers that do not support SVG images, the module converts the uploaded SVG to PNG. This functionality relies on ImageMagick which must be installed on the server. It must e either configured to run via the PHP extension or as an external executable command. The PHP-extension enables us to tweak the source SVG XML before rendering and handles text more reliably. For more details follow instructions provided with the imagemagick module and at php.net 's Imagick Setup page). When required, the field formatter will load a small Javascript routine to detect browser support for SVG within image tags and if necessary, replace them with PNG files. To check if the module converts SVG to PNG files go to Admin > Configuration > Media > SVG Images ( /admin/config/media/svg-img ).

Currently all major desktop and mobile browsers support SVG. PNG fallbacks are needed only for IE8 and earlier as well as Opera Mobile.

This approach lets you use one field for different types of images, so you can mix and match JPEG, PNG, GIF or SVG files, while providing graceful degradation for users of legacy browsers. As such it will work with most other image presentation modules. Please remember to add svg to list of available format extensions in your image field settings.

Although SVG files need not be resized, the image tag formatter will take account of any image styles assigned to an image field display for the PNG alternative.

For more advanced use cases, the module provides a full inline SVG formatter, which can only be used with SVG files. This reads the content of an SVG file and embeds in an HTML wrapper.

Most static SVG files, even several MB in size, render fine. However, ImageMagick does not always render animated SVGs. These exceptions are logged under Admin > Reports > Recent Log Messages. I can only suggest using one of many SVG Cleanup utilities if exporting from applications such as Inkscape or Illustrator.

Supporting organizations: 
Required for client project
AttachmentSize
svgimg-7.2-alpha.tar_.gz87.14 KB

Project Information