EDIT: I originally stated that I was unable to manipulate Inkscape SVGs with JavaScript; this was an error on my part, owing to my failure (in my joy over discovering this site) to revisit the project which had been dormant for over a year. I would actually like to do some server-side manipulation with PHP; this is where the issue arises.

I'm looking to create javascriptable SVG images for a web dashboard project, and would like to initialize them using server-side PHP before they load. The last time I looked at Inkscape it was burying crucial attributes like stroke width, fill colour, font &c in the style attribute rather than in individual element attributes; this makes programmatic manipulation a serious PITA.

Does anyone know of either a good open-source SVG editor that sets the element characteristics in individual element attributes, or a tool that can convert Inkscape files?

As I understand it, to (for example) use JavaScript PHP/XML DOM to alter the fill of a rectangle, it has to be defined as

<svg ...>
  <rect id="temp_level"
       fill="#0000ff" stroke="none"
       width="25" height="60"
       x="1" y="1" />

while Inkscape defines it as

<svg ...>
  <rect id="temp_level"
       width="25" height="60"
       x="1" y="1" />

and that JavaScript PHP can't access the individual elements of the style attribute.

  • Here's an example of me manipulating SVG with JQuery and yes I agree with you it was a PITA (not JQuery - JQuery is fantastic). It might be easier to understand what you are trying to do if you were to post two example fragments of SVG (before and after)? – Antony Nov 11 '15 at 10:27
  • What I'd like to do is use javascript's DOM functions to manipulate things like the fill colour or dimensions of an object eg. a thermometer widget with a coloured column that grows, shrinks and changes colour depending on the value to be displayed. The W3 SVG standard says these should be set in presentation attributes, which makes them part of the DOM. Inkscape puts them in inline styles, which are outside the DOM and so much harder to animate. – Darwin von Corax Nov 13 '15 at 7:06
  • Are you sure? The page you've linked in the SVG standard mentions the style attribute but doesn't seem to have a problem with it, and the individual styles do seem to be accessible from within the DOM too. – Antony Nov 13 '15 at 11:05
  • I've added some sample XML to the original question. Can you show me some sample JavaScript that can change eg. the fill colour of the rectange? If you can, I'd be most appreciative. Note that the problem I'm attempting to solve is not manipulation of SVG, but manipulation of an SVG created by Inkscape. – Darwin von Corax Nov 13 '15 at 11:27
  • Sure, let's make your blue rectangle red: document.getElementById('temp_level').style.fill = 'red'; – Antony Nov 13 '15 at 11:38

Yes, this does indeed seem to be a limitation with respect to the PHP DOM library. Much easier to fix on the Inkscape side. Choose to save as "optimized svg"

Inkscape save as optimized svg

And then make sure the "style to XML" box is ticked.

enter image description here


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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