2

I seem to not understand svg. I would like someone to explain to me where I am going wrong. So I have an inline svg: 

  <div style="width:1000px; height:auto; background-color:blue;">
    <svg class="_image"><use xlink:href="#myId" />
      <symbol id="myId" viewBox="0 0 1000 700">
        <ellipse cx="200" cy="80" rx="100" ry="50"
          style="fill:yellow;stroke:purple;stroke-width:2" />
      </symbol>  
    </svg>
  </div>

The width of the div is set to 1000px. The svg is set to a 100% width. It has a viewBox. I would now expect the svg to scale 100% in width, which means 1000px in width, and then adjust the height accordingly since it is set to auto both for the div and for the svg itself. I expect this, since I provided a viewbox. Where am I going wrong?

Here is the css:

._image  {
  width: 100%;
  height: auto;
}

...and everything put together as a fiddle: https://jsfiddle.net/hv6ejn98/2/

George Welder
  • 3,787
  • 11
  • 39
  • 75
  • https://css-tricks.com/scale-svg/ – CBroe Jun 22 '17 at 10:27
  • thanks. I've looked at that very tutorial (and many others), they all tell me i need a viewbox and then it scales appropriately. This does not seem to work for me though, so I must be missing something. That's why I created this minimal example, it's really not much. So if you can be a bit more specific, that would be greatly appreciated. – George Welder Jun 22 '17 at 10:30
  • Your svg is 100% in width i.e 1000px. The ellipse in your case inside it is not. Try putting a svg image. It will scale as expected.Then you can debug this. – Shruti Agarwal Jun 22 '17 at 10:31
  • I am not sure I understand. Am I not using an svg image? I am using sprites in my site, so i have a big svg with different ``s which have different tags, so I can inline include them in my html. – George Welder Jun 22 '17 at 10:35
  • put your svg img inside an img tag and try to add width to that img class. – Hema Nandagopal Jun 22 '17 at 10:55
  • I think the point of using `symbol`s and inline svgs is exactly to avoid this? See here https://css-tricks.com/svg-sprites-use-better-icon-fonts/ & here https://css-tricks.com/svg-symbol-good-choice-icons/ . Or what exactly am I missing? – George Welder Jun 22 '17 at 11:10
  • https://developer.mozilla.org/en-US/docs/Web/SVG/Element/symbol https://graphicdesign.stackexchange.com/questions/74366/svg-sprite-from-illustrator-with-separate-viewbox-for-each-element/74372#74372 – DanielaB67 Jun 22 '17 at 12:20
  • https://stackoverflow.com/questions/19484707/how-can-i-make-an-svg-scale-with-its-parent-container – DanielaB67 Jun 22 '17 at 12:25
  • I dont understand? I do have viewboxes on my symbols. :( All the links you provided just have exactly what I have, so I don't understand how they are supposed to help me out? : / If I'm mistaken, feel free to correct me! – George Welder Jun 22 '17 at 12:27

1 Answers1

0

The svg is set to a 100% width. It has a viewBox.

No it doesn't. Only your <symbol> does. Without a viewBox your SVG won't scale. If you add a viewBox to the SVG, everything works as you expect.

<div style="width:1000px; height:auto; background-color:blue;">
    <svg class="_image" viewBox="0 0 1000 700"><use xlink:href="#myId" />
      <symbol id="myId" viewBox="0 0 1000 700">
        <ellipse cx="200" cy="80" rx="100" ry="50"
          style="fill:yellow;stroke:purple;stroke-width:2" />
      </symbol>  
    </svg>
  </div>
Paul LeBeau
  • 97,474
  • 9
  • 154
  • 181
  • ok, thanks, that's great. I am using the symbol, however, because I am using it in a sprite file. This means I cannot give the svg a viewBox - since it contains all the images of my whole project. See here https://css-tricks.com/svg-sprites-use-better-icon-fonts/ and here https://css-tricks.com/svg-symbol-good-choice-icons/. Any advice for this case? – George Welder Jun 23 '17 at 09:45
  • Depends what you mean by "sprite file". If you mean a replacement for a bitmap sprite file, then just set your SVG width and height to match the viewBox. Ie. `width="1000" height="700" viewBox="0 0 1000 700"`. If instead you mean "a collection of symbols accessed from another file", then the viewBox needs to go in that other file. The one in this file will be ignored anyway. – Paul LeBeau Jun 23 '17 at 10:21