SVG Embed

SVG graphics are really powerful but not yet widely supported. What makes them interesting in particular is that included text remains text and therefore should have some positive SEO effect and is searchable.

What this module does is to provide a text filter that automatically embeds an SVG graphic into your html text and before doing this, translates all the textstrings in the graphic. This has huge advantages on multi lingual sites: the graphic always adjusts to the surounding content or the user preferences and gets displayed in the correct language.

How does it work? The module asumes that you upload your SVG graphics in any of the multiple ways that Drupal supports. In other words, the file should be on your server and a record of the file should be in the managed files table. You can then simply include something like [svg:4711] into your body text of any node, assuming that 4711 is the file id in your database. If you don't know the file id, you can also use something like [svg:my_graphic.svg] where my_graphic.svg is the filename that has been uploaded.

New since version 2.1: This version now also supports the replacement of embedded file entities and embedded media entities if those are SVG files. So there's the list of supported syntax, that this text filter can replace with the translated SVG file content:

• [svg:FILEID]
• [svg:FILENAME]
• <svg data-entity-type="file" data-entity-uuid="UUID"> </svg>
• <drupal-media data-entity-type="media" data-entity-uuid="UUID"> </drupal-media>

That's all - it just works that way. And translates your SVG graphic on-the-fly too.

How to setup your site for SVG Embed? There are just a few steps: Enable the module, then configure your text formats (go to admin/config/content/formats) and enable svg_embed for any text format where you want to use it. To be safe that no other filter plays with your SVG code later you should make the SVG Embed filter the last one in the sequence of filters.

How do you translate your text in SVG files? The module assumes that your SVG graphics come with english text included in the original image. Once you've included them into your site, they show up in english only by default until you go through the translation of the strings. To do that, go to "Translate interface" > "Embedded SVG" (found at admin/config/regional/translate/svgextract) and you can download PO files for every enabled language on your site. Once you've completed the translation offline, you can upload the translated files in the same form. Note: All strings from all SVG files on your site will be found in one single PO file per language.

Dependencies: Only two core modules, locale and filter, are required by svg_embed.

Known issues:

• Embedding SVG inline into XHTML seems to work really well with Firefox and IE (yes, IE is on the positive site this time), but text doesn't properly display in Chrome and Safari. We haven't found the reason for that yet but it does seem to be a browser issue.