0

I'd like to have an SVG image that has the width of its parent div and the height should be 14% of its width.

This code works in Firefox but not in Chrome:

<svg 
    xml:space="preserve"
    preserveAspectRatio="xMinYMin meet"
    height="100%" width="100%"
    viewBox="-1 -10 242 33">
    ...
</svg>

In Chrome the aspect ratio is 1 so the svg content is at the top of the square with a lot of whitespace below it. I need the svg file to be inline so I can't use the img tag.

Toast
  • 596
  • 2
  • 19
  • 39

1 Answers1

3

If you remove the height and width attributes from your SVG but retain the viewBox, then it will scale proportionally to the size of its parent container. For example, the following markup produces three SVG images in <div> containers of different widths. In each case, the SVG scales up to the width of its parent container.

This is working fine for me in Chrome.

<div style="width:200px; height:100px; background-color:#f00; margin-bottom:10px;">
  <svg viewBox="0 0 70 10">
    <rect x="1" y="1" width="68" height="8" fill="#ff0" stroke="none" />
    <text x="35" y="7" font-size="6" text-anchor="middle">&lt;SVG&gt; width=200px</text
  </svg>
</div>
<div style="width:300px; height:100px; background-color:#f00; margin-bottom:10px;">
  <svg viewBox="0 0 70 10">
    <rect x="1" y="1" width="68" height="8" fill="#ff0" stroke="none" />
    <text x="35" y="7" font-size="6" text-anchor="middle">&lt;SVG&gt; width=300px</text
  </svg>
</div>
<div style="width:400px; height:100px; background-color:#f00; margin-bottom:10px;">
  <svg viewBox="0 0 70 10">
    <rect x="1" y="1" width="68" height="8" fill="#ff0" stroke="none" />
    <text x="35" y="7" font-size="6" text-anchor="middle">&lt;SVG&gt; width=400px</text
  </svg>
</div>
r3mainer
  • 23,981
  • 3
  • 51
  • 88
  • [Here is an example that uses your code](http://marian42.de/svg/). It works in FF but not in Chrome. – Toast Nov 30 '14 at 20:10
  • @Toast Well that looks absolutely fine to me. I think what you need to do is this: (1) Create a [minimal, complete and verifiable example](http://stackoverflow.com/help/mcve) of the markup that is causing this problem, (2) paste this markup in your question instead of linking to an off-site web page, and (3) take screenshots of the expected behaviour and the incorrect behaviour you're seeing in Chrome, and insert them in your question. – r3mainer Nov 30 '14 at 20:17
  • How can I put the files required by bootstrap in my question? If I don't provide them, the code is not runnable... – Toast Nov 30 '14 at 20:22
  • @Toast Can't you just link then in? Why is this a problem? – r3mainer Nov 30 '14 at 20:34
  • From where should I link them? It's a problem because the example is either incomplete or it contains all the css code of bootstrap. – Toast Nov 30 '14 at 20:43
  • @Toast From your HTML, where else?? JSFiddle has a button that allows you to add external resources. So does the snippet editor built into this website. Sorry, but I've had a pretty tiring day and don't have the patience for this right now. Hopefully someone else can fix your problems for you. – r3mainer Nov 30 '14 at 20:55
  • First sentence <3 – LazioTibijczyk Feb 04 '21 at 14:50