I’m looking for an easy way to add a bit of dynamic text to a svg graphic. Basically, I need to change a few characters (<50) next to a logo, and have it display in the correct font. Anyone done this with EE?

  • Can you show us an excerpt of the SVG file around the text you want to change? And how do you plan to include the SVG on HTML?
    – Sobral
    Jun 15, 2015 at 22:01
  • ^^ This, we need examples!! :D
    – Blatant
    Jun 16, 2015 at 9:09

2 Answers 2


Just a wild, out there, not an answer but an idea,...

Could you not just load the SVG graphic as a background (something like http://www.html5rocks.com/en/tutorials/svg/mobile_fundamentals/), then overlay the SVG text on top?


Your options are:

  1. Best choice is to have the SVG raw in the EE template, then you can inject the dynamic text exactly where you want it. Negatives are that it increases the initial DOM filesize. See below for example.
  2. Edit the SVG in editing software and add the text in there - not viable as not dynamic, unless there's a limited amount of variations.
  3. As Blatant suggested, overlay another DOM object over the top. Although could be tricky with positioning in various browsers and responsive. And if using an SVG object, then you'd need it dynamic, so loaded in via the template, not external
  4. Save JS variables in the EE template, then on pageload you can access the SVG object (raw JavaScript only - not JQuery) to inject the relevant DOM items into the SVG. Negatives with this approach is the SEO value could be diluted as the text is injected after pageload.
  5. Way more complex and not worth the effort, but write an add-on to edit the SVG external file and injecting the dynamic text before loading. Including all options here, however far out!

EE template:

EE template before

<svg  version="1.1" id="whatever" class="logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="612px" height="502.174px" viewBox="0 65.326 612 502.174" enable-background="new 0 65.326 612 502.174" xml:space="preserve">

  <your logo or shapes here>


EE template after

See SVG example code here.

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.