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.