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

[CWebba1]

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.

[ralph.m]

I can't tell what the issue is from looking at those links. What do you want to see here?