How to make a svg element expand or contract to its parent container

Question

The goal is to have the  lt svg gt  element expand to the size of its parent container  in this case a  lt div gt   no matter how big or small that container may be   The code    lt style gt      svg   container          height  100           width  100          lt  style gt    lt div id  container  gt       lt svg xmlns  http   www w3 org 2000 svg  version  1 1   gt            lt rect x  0  y  0  width  100  height  100    gt       lt  svg gt   lt  div gt    The most common solution to this problem seems to be setting the viewBox attribute on the  lt svg gt  element    viewBox  0 0 widthOfContainer heightOfContainer    However  this does not seem to work in cases where elements within the  lt svg gt  element have predefined widths and or heights  For example  the  lt rect gt  element  in the above code  has its width and height explicitly set   So the obvious solution is to use   widths and   heights on those elements as well   But does this even have to be done   Especially  since  lt img src test svg  gt  works fine and expands contracts without any problems with explicitly set  lt rect gt  heights and widths   If elements like  lt rect gt   and other elements like it  have to have their widths and heights defined in percentages  is there a way in Inkscape to set it so that all elements with the  lt svg gt  document use percentage widths  heights  etc   instead of fixed dimensions

User · Answer

For your iphone You could use in your head balise     width device-width

User · Answer

What s worked for me recently is to remove all height  quot  quot  and width  quot  quot  attributes from the  lt svg gt  tag and all child tags  Then you can use scaling using a percentage of the parent container s height or width  Before   lt svg width  quot 3212 quot  height  quot 3212 quot  viewBox  quot 0 0 3212 3212 quot  fill  quot none quot  xmlns  quot http   www w3 org 2000 svg quot  gt     circle cx  quot 1606 quot  cy  quot 1606 quot  r  quot 1387 quot  stroke  quot black quot  stroke-width  quot 438 quot   gt   lt  svg gt   After   lt svg viewBox  quot 0 0 3212 3212 quot  fill  quot none quot  xmlns  quot http   www w3 org 2000 svg quot  gt     circle cx  quot 1606 quot  cy  quot 1606 quot  r  quot 1387 quot  stroke  quot black quot  stroke-width  quot 438 quot   gt   lt  svg gt

User · Answer

Suppose I have an SVG which looks like this     And I want to put it in a div and make it fill the div responsively  My way of doing it is as follows   First I open the SVG file in an application like inkscape  In File- Document Properties I set the width of the document to 800px and and the height to 600px  you can choose other sizes   Then I fit the SVG into this document     Then I save this file as a new SVG file and get the path data from this file  Now in HTML the code that does the magic is as follows    lt div id  containerId  gt           lt svg     id  svgId       xmlns svg  http   www w3 org 2000 svg      xmlns  http   www w3 org 2000 svg      version  1 1      x  0      y  0      width  100       height  100       viewBox  0 0 800 600      preserveAspectRatio  none  gt          lt path d  m0 0v600h800v-600h-75 07031l-431 597 9707-292 445315-223 99609 269 548825-373 97461h-271 0332z  fill   f00   gt       lt  svg gt   lt  div gt    Note that width and height of SVG are both set to 100   since we want it to fill the container vertically and horizontally  but width and height of the viewBox are the same as the width and height of the document in inkscape which is 800px X 600px  The next thing you need to do is set the preserveAspectRatio to  none   If you need to have more information on this attribute here s a good link  And that s all there is to it   One more thing is that this code works on almost all the major browsers even the old ones but on some versions of android and ios you need to use some javascrip jQuery code to keep it consistent  I use the following in document ready and resize functions       svgId   css        width       containerId   width      px        height       containerId   height      px        Hope it helps

User · Answer

robertc has it right  but you also need to notice that svg   container causes the svg to be scaled exponentially for anything but 100   once for  container and once for svg    In other words  if I applied 50  h w to both elements  it s actually 50  of 50   or  5    5  which equals  25  or 25  scale   One selector works fine when used as  robertc suggests   svg     width 50     height 50

User · Answer

The viewBox isn t the height of the container  it s the size of your drawing   Define your viewBox to be 100 units in width  then define your rect to be 10 units   After that  however large you scale the SVG  the rect will be 10  the width of the image

[css] How to make a <svg> element expand or contract to its parent container?

Examples related to css

Examples related to html

Examples related to svg

Examples related to responsive-design