CODEWITHSUNDEEP
svgscalesymbols
Magnus Warker
Magnus Warker

Reputation: 21

Scaling when using a defined symbol

I want to create a SVG graphic that loads an external SVG file, stores it as a symbol into its defs section and uses this symbol in the main section:

<svg width="1000" height="1000">
 <defs>
  <symbol id="sym1" width="50" height="50" viewBox="0 0 45 45">
   <svg width="45" height="45">
       <rect x="0" y="0" width="45" height="45" style="stroke:red;stroke-width:1;fill:none"/>
   </svg>
  </symbol>
 </defs>
 <rect x="100" y="100" width="50" height="50" style="stroke:black;stroke-width:1;fill:none"/>
 <use x="100" y="100" xlink:href="#sym1"></use>
</svg>

http://jsfiddle.net/tx0rpxdf/4/

One frame condition is that I cannot change the inner SVG element, because it will be loaded from an external file.

The symbol should have a size of 50x50, so I define its width and height accordingly. I know that the inner SVG element has a size of 45x45, so I define its viewBox as "0 0 45 45".

To test the usage of the symbol, I create a black rectangle of size 50x50 and place a symbol instance at the same position. The lines should match.

But they don't match using Chrome (Chromium) on Debian Jessie. Even worse, it produces different results in Firefox and Opera.

What's the problem here and how can I produce the correct result in all browsers that support SVG?

Upvotes: 0

Views: 891

Answers (1)

Robert Longson
Robert Longson

Reputation: 124089

There are a couple of issues:

  • a <rect> with width/height 45 and a stroke-width of 1 is not 45 user units wide, it's 46 user units wide as the stroke pokes out inside by 0.5 of a unit and outside by 0.5 of a unit on each edge. If you can't change the inner <svg> element then you won't be able to fix this issue though.

  • drawing two shapes one on top of another will not make one hide another as there will be antialiasing in effect. shape-rendering="optimizeSpeed" can prevent this.

Upvotes: 1

Related Questions