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: