Get inline SVG to scale as viewport changes

HTML & CSS
1

Hello,
I am trying to get an inline SVG in an HTML5 document to scale as the viewport changes. Since the rest of this site will be responsive, I need this SVG to be so as well so that it can fit in the layout.

I don’t know if this requires styling or attributes so I posted in both the (X)HTML and CSS forums.

I added a parent container div to give it a max width so it doesn’t get too big. I also added a bunch of attributes that I was told would help, but haven’t so far.

I also added a width and height of 100% and max and min width to the parent container div as one would do to make an element scalable with the viewport normally in CSS.

I would greatly appreciate all and any help in achieving this!

2

Hi,

I don’t know anything about svg but a quick google turns up this example using the viewbox attribute.


<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
     viewBox="0 0 1500 1000" preserveAspectRatio="none"
     xmlns="http://www.w3.org/2000/svg">
  <desc>Example ViewBox - uses the viewBox 
   attribute to automatically create an initial user coordinate
   system which causes the graphic to scale to fit into the
   viewport no matter what size the viewport is.</desc>
  <!-- This rectangle goes from (0,0) to (1500,1000) in user space.
       Because of the viewBox attribute above,
       the rectangle will end up filling the entire area
       reserved for the SVG content. -->
  <rect x="0" y="0" width="1500" height="1000" 
        fill="yellow" stroke="blue" stroke-width="12"  />
  <!-- A large, red triangle -->
  <path fill="red"  d="M 750,100 L 250,900 L 1250,900 z"/>
  <!-- A text string that spans most of the viewport -->
  <text x="100" y="600" font-size="200" font-family="Verdana" >
    Stretch to fit
  </text>
</svg>

Hopefully it’s of some use.

3

Thank you. I saw that, I set the viewbox attribute to the max and min values already. However, I had set perserveAspectRatio to something other than none. The example says the example works with setting the value of that attribute to none. I’ll try that and get back to you / this thread.

EDIT / UPDATE: That did not fix the issue, just did not keep the aspect ratio.

4

It is difficult to discern exactly what you want to achieve, but if you state width: 10% you will observe the SVG is indeed scaling according to the browser width.and i hope you are correctly Wright…