SVG to HTML/CSS

Question

Well I have an SVG file named 7.svg.

How can I display the image with HTML or CSS in my index.html?

Answer 1

<img> tags support SVG. Just add <img src="/path/to/svg.svg"> to the page.

Example.

Take control of the size with CSS.

Answer 2

Well you can do this in three different ways.

Using the <embed> Tag

<embed src="7.svg" width="300" height="100"
type="image/svg+xml"
pluginspage="http://www.adobe.com/svg/viewer/install/" />

Using the <object> Tag

<object data="7.svg" width="300" height="100"
type="image/svg+xml"
codebase="http://www.adobe.com/svg/viewer/install/" />

Using the <iframe> Tag

<iframe src="7.svg" width="300" height="100">
</iframe>

Tell me which one works out for you. Please run it on differnt browsers and let me know.

HTML 5 info:

Since your are using HTML 5 you probably wanna check out this: http://www.whatwg.org/specs/web-apps/current-work/#svg Its still under work and is partially implemented in Firefox, Safari, Opera (xhtml5 serialization only)

https://developer.mozilla.org/en/svg_in_html_introduction

Answer 3

Add this somehwere in your html file

<embed src="7.svg" width="300" height="100"
type="image/svg+xml"
pluginspage="http://www.adobe.com/svg/viewer/install/" />

taken from w3schools