How to scale SVG properly and responsively in HTML5?

Question

I would like to contain page logo and nav in the same header container - logo on the left, nav container on the right. How to make SVG logo embedded inline properly scale to always fill 100% of its container (header) height and auto scale width - at the same time staying on the left of the container? (Do I need separate <div> to wrap <svg> container?)

Probably I have to set svg viewBox property, but I'm not sure about how to do it to be sure that it will be responsive and render properly in different resolutions)?

My code:

HTML:

<header id="page-header">

    <svg id="logo" 
         xmlns="http://www.w3.org/2000/svg">
         <path d="..."/><g></g>
    </svg>

    <nav id="page-nav">
          <a href="...">...</a>
          ...
    </nav>

</header>

CSS:

#page-header {
    height: 9em;
    padding: 0;
    margin: 0 0 6em 0;
}

#logo {
    padding: 0;
    width:600px;  //not working at all.

    vertical-align:top;
    float:left;

    display:inline-block;
}

#page-nav {
   float:right;
   ...
}

If you want the SVG to scale it is imperative that it has a viewBox attribute. — Paul LeBeau, May 15 '14 at 04:23
I don't know what exactly do you mean by demo. There is a little JSfiddle: http://jsfiddle.net/2myBV/32/ There is an mockup: http://i.imgur.com/vC6ugq1.png — JoannaFalkowska, May 15 '14 at 15:05

jshanley · Accepted Answer · 2014-05-14T23:57:15.750

You should set the viewBox attribute first, and then make all of your dimensions within your svg relative to that. When you assign height and width (whether in your svg tag or in your css) you are adjusting the size of the svg bounding box, not the size of the elements within it. By setting a viewBox you let the browser know that you want the image to be contained within a certain bounding box, and then when you then adjust the width or height, it will be re-scaled accordingly.

The viewBox attribute takes four space-separated values x y w h where x is the x-coordinate of the left side of the bounding box, y is the y-coordinate of the top of the bounding box and w and h are the width and height of the bounding box.

If you want a square bounding box for your logo, you could do something like this:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <!-- your svg elements -->
</svg>

Then everything would be sized relative to a 100x100 bounding box, so if you wanted a circle in the center, with the same width as the bounding box, you would just do:

<circle cx="50" cy="50" r="50" fill="red"></circle>

Then if you used your css to make the width: 100%;, your circle would be the width of your container rather than 50px.

Here's a fiddle that shows how changing each value of the viewBox affects the output. Hope that helps.

Thank you for explaining this! But just to be sure - it looks like it's not possible to scale svg image responsively on different resolutions using pure CSS (and not JavaScript) - specifying viewBox size in ems or restricting its size to the size of its container? — JoannaFalkowska, May 15 '14 at 14:33
@Senthe if you want more control over the size you can give it width and height `100%` and wrap it in a `div`, giving the wrapper a percentage width. [**FIDDLE**](http://jsfiddle.net/uHGLF/). Try dragging that window width around... If you assign a width in ems you're going to get a fixed size; if you want it to be responsive you'll need to use a percentage. — jshanley, May 15 '14 at 14:46

score 0 · Answer 2 · answered May 20 '14 at 00:53

0

You can indeed scale the svg image with css, take a look at this page, where it is explained well with many examples. http://soqr.fr/testsvg/embed-svg-liquid-layout-responsive-web-design.php

answered May 20 '14 at 00:53

koober

158
8

How to scale SVG properly and responsively in HTML5?

2 Answers2

Linked