SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2010
    0 Post(s)
    0 Thread(s)

    Seeking help with SVG, the object tag and Responsive HTML5 design


    I am seeking help with SVG and Responsive HTML5 design.

    My goal is to place a SVG logo within a responsive grid layout that resizes with percentage widths and media queries.

    The SVG has a viewport setting with the height and width undefined. I've also added a "xMidYMid meet" preserveAspectRatio attribute. It should be good to go.

    The SVG is contained within an <object> tag that is set to a 100% width and is in turn wrapped within a floated <figure> tag which has the responsive percentage width properties.

    The snag is the <object> tag. The <object> tag appears to be an inline element and it displays in Safari (including iphone) with lots of space like a text element. I cannot figure out how to eliminate that unwanted space.

    I've tried <embed> and <div> as well. Safari chokes on all of it. The <object> tag is the "proper" tag to use, and in the long run if I want to program the SVG, the <object> is the way to go.

    If there is a Polyfill that I can use to fix Safari/webkit implementation and supplement their implementation of the <object> tag I'm all ears as well.

    I have two test demos that show how it is failing:
    (scroll down lots of bad funk space)

    Here is the CSS for the responsive layout:

    #logo { width:12%;
    margin: 0;
    overflow: hidden;

    .svgobj {
    width: 100%;
    background-color: #FFE;
    font-size: 0;

    Some of these declarations are cruft, me throwing ideas to solve the problem. The key is 100% <object> within percent-width <figure>.

    Please reply.

    Thank you.

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Melbourne, AU
    448 Post(s)
    8 Thread(s)
    I can't tell what the issue is from looking at those links. What do you want to see here?
    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."


Posting Permissions

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