Markers specified via style are not rendered

[mibalan]

This happens because of the ID reassignment: elements have their IDs changed (e.g. <marker id="Arrow1Lend"> becomes <marker id="Arrow1Lend-0">) but the style declarations are not updated to match (e.g. <path style="marker-start:url(#Arrow1Lend)"> will remain unchanged).

You can see below a simple file that exhibits this problem:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->

<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   version="1.1"
   width="128"
   height="128"
   id="svg8338">
  <defs
     id="defs8340">
    <marker
       refX="0"
       refY="0"
       orient="auto"
       id="Arrow1Lend"
       style="overflow:visible">
      <path
         d="M 0,0 5,-5 -12.5,0 5,5 0,0 z"
         transform="matrix(-0.8,0,0,-0.8,-10,0)"
         id="path3795"
         style="fill-rule:evenodd;stroke:#000000;stroke-width:1pt;marker-start:none" />
    </marker>
    <marker
       refX="0"
       refY="0"
       orient="auto"
       id="DotL"
       style="overflow:visible">
      <path
         d="m -2.5,-1 c 0,2.76 -2.24,5 -5,5 -2.76,0 -5,-2.24 -5,-5 0,-2.76 2.24,-5 5,-5 2.76,0 5,2.24 5,5 z"
         transform="matrix(0.8,0,0,0.8,5.92,0.8)"
         id="path3854"
         style="fill-rule:evenodd;stroke:#000000;stroke-width:1pt;marker-start:none;marker-end:none" />
    </marker>
  </defs>
  <metadata
     id="metadata8343">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title></dc:title>
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <g
     transform="translate(0,-924.3622)"
     id="layer1">
    <path
       d="m 14.285713,989.50504 99.999997,0"
       id="path8346"
       style="fill:none;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;marker-start:url(#DotL);marker-end:url(#Arrow1Lend)" />
  </g>
</svg>

[mibalan]

The work-around for me was to use the non-minified version and manually disable the ID remapping.

Would it be an option to make ID remapping configurable by the user?

[mibalan]

Sounds a lot like #29 , just that in my case I can't use a class (instead of an id) to style my SVG.

[protodave]

Hey Mihai! You are correct, SVGInjector's ID renumeration doesn't currently parse references contained in style attributes... it's looking for the SVG specific element styling properties. In your case the marker related properties: marker-start and marker-end.

The quick fix for your example SVG is to simply use those properties, like so:

<path
  d="m 14.285713,989.50504 99.999997,0"
  id="path8346"
  style="fill:none;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;"
  marker-start="url(#DotL)"
  marker-end="url(#Arrow1Lend)"
/>

Little background on the reason for ID renumeration feature... When injecting SVG inline into the DOM with SVGs that use IDs for fragment identifiers you start having problems related to duplicate IDs (if you use the same SVG twice on the same page, for example), which isn't allowed by the HTML spec:

The id attribute assigns a unique identifier to an element... This name must be unique in a document.
http://www.w3.org/TR/html401/struct/global.html#id-and-class

The HTML spec doesn't define how to handle duplicate IDs, but in practice browsers just use the first instance in the DOM. Browsers also don't properly implement the visibility rules from the SVG spec, taking a rendering performance shortcut which can break SVG display when using multiple SVGs where the first one on the page might be hidden.

So, I'm hesitant to make it possible to disable that feature... but maybe it can be an option, like you said. Maybe even on a per-SVG basis?

So with all that background, any thoughts on how we can improve SVGInjector for this use case?

Thanks!

[mibalan]

Well, ideally, the style declarations would be parsed as well 😁 but I'm aware that's quite a project on its own.

For cases where you're only injecting a single SVG, or non-similar SVGs, I still believe it would be a good idea to be able to disable ID renumeration. In my case, this was the only option, because the authoring tool generated the markers in the style attribute, not in a separate marker element.