SitePoint Sponsor

User Tag List

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

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

    Hello,

    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:

    http://www.craigwebbart.com/csw/svg-test02.htm

    http://www.craigwebbart.com/csw/HTML5_SVG_demo02.htm
    (scroll down lots of bad funk space)

    Here is the CSS for the responsive layout:

    #logo { width:12%;
    margin: 0;
    padding:0;
    float:left;
    line-height:0!important;
    overflow: hidden;
    }

    .svgobj {
    width: 100%;
    background-color: #FFE;
    display:block!Important;
    line-height:0!important;
    font-size: 0;
    vertical-align:top;
    margin-bottom:0!important;
    }

    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
    Location
    Melbourne, AU
    Posts
    24,165
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    I can't tell what the issue is from looking at those links. What do you want to see here?


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
  •