2

I have an enormous svg. I'd like to scale it to be 100% wide (the width of the screen). What would be the best way to do that, please?

html:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="1368px"
 height="775px" viewBox="0 0 1368 775" enable-background="new 0 0 1368 775" xml:space="preserve">
...

css: 

.svg {
position: absolute;
top: 50px;
left: 50%;
transform: translateX(-50%); /* center */
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);

}

LauraNMS
  • 2,720
  • 7
  • 39
  • 73
  • Why display none on something you want to see? – Paulie_D Jul 14 '15 at 18:33
  • possible duplicate of [How to make a element expand or contract to its parent container?](http://stackoverflow.com/questions/8919076/how-to-make-a-svg-element-expand-or-contract-to-its-parent-container) – Stickers Jul 14 '15 at 18:35
  • @Paulie_D: Sorry, I've removed that css line -- it was something that in my program gets removed by jquery. – LauraNMS Jul 14 '15 at 18:38
  • the linked answer isn't working for me. Can someone please help? – LauraNMS Jul 14 '15 at 18:57
  • Answer was here: http://stackoverflow.com/questions/5643254/how-to-scale-svg-image-to-fill-browser-window – LauraNMS Jul 14 '15 at 19:05

1 Answers1

1

Try this SVG header, wrapped around a <div> that controls the width, height using CSS. 

<body>
  <div style="width: 100%; height: 100%">

    <svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMinYMin meet" viewBox="0 0 1368 775" enable-background="new 0 0 1368 775" xml:space="preserve">
    ...
    </svg>
  </div>
</body>
Alvin K.
  • 4,329
  • 20
  • 25