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 Scaling Inline SVG in HMTL5 document as the page scales

    Hello,
    I am trying to add inline SVG to an HTML5 document for the first time and I am having some problems scale as the viewport scales.
    Since the rest of this site will be responsive, I want the SVG to behave likewise so that it fits in the layout.

    I added a parent div and gave it styles of a width and height of 100% and max-width and max-height to keep it from becoming outrageously big. I also added many attributes to the SVG element including baseProfile, height, width, preserveAspectRatio, and viewBox all that my research said would help, but so far the SVG is not scaling.

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

    Thanks in Advance.

    Here is a live example of the HTML document with the inline SVG: https://dl.dropbox.com/u/270523/inlineSVG.html

  2. #2
    SitePoint Enthusiast
    Join Date
    Oct 2012
    Location
    Tinker Air Force Base, Oklahoma, United States
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    max-width:100% makes it scale when it runs out of space. However, if you're trying to make it size with the layout, you may need to use some media queries.

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,097
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    The container has max-width: 106px; which prevents any growth.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  4. #4
    SitePoint Guru team1504's Avatar
    Join Date
    May 2010
    Location
    Okemos, Michigan, USA
    Posts
    732
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Ah, okay. Thank you @ralph.m !


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
  •