CODEWITHSUNDEEP
csssvg
LauraNMS
LauraNMS

Reputation: 2863

scaling an svg to be the width of the screen

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%);

}

Upvotes: 2

Views: 562

Answers (1)

Alvin K.
Alvin K.

Reputation: 4379

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>

Upvotes: 1

Related Questions