SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Guru team1504's Avatar
    Join Date
    May 2010
    Location
    Okemos, Michigan, USA
    Posts
    732
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Question Get inline SVG to scale as viewport changes

    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. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I don't know anything about svg but a quick google turns up this example using the viewbox attribute.
    Code:
    <?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. #3
    SitePoint Guru team1504's Avatar
    Join Date
    May 2010
    Location
    Okemos, Michigan, USA
    Posts
    732
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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.
    Last edited by team1504; Feb 15, 2013 at 15:48. Reason: update

  4. #4
    SitePoint Member
    Join Date
    May 2013
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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...


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •