How to use .svg files in a webpage?

I want to know how can one actually use a .svg file In a web page?

Solution 1:

See svgweb quickstart and the svgweb project homepage for something that works in all browsers including IE (requires flash plugin).

There are many ways to include an existing svg file:

<img src="your.svg"/>
<object data="your.svg"/>
<iframe src="your.svg"/>
<embed src="your.svg"/>
<div style="background:url(your.svg)">...</div>

Solution 2:

If all you want to do is to place an SVG image such as a logo or static diagram, you just need to be careful to provide a fallback for older versions of Internet Explorer (i.e. versions 8 and earlier).

The best and simplest method I've found is to use a .png or .jpg for your fallback, placed using a normal img tag. You then wrap the img tag in an object tag, using the data attribute to place the SVG.

<object data="/path-to/your-svg-image.svg" type="image/svg+xml">
  <img src="/path-to/your-fallback-image.png" />
</object>

The img fallback is only loaded and used if the browser doesn't understand SVG.

Solution 3:

I recommend putting the svg inline into your document (html5 technique). Just open your SVG file, copy the SVG tag and everything insideof it and then paste it into your html document.

<html>
    <body>
        <svg></svg>
    </body>
</html>

It has the advantage that this allows you to use css to style it, like changing the fill color or applying filters to it like blur. Another advantage is that you save one http request for fetching the svg file if it is inside of your document.

If you want for example to change its position using css, then you have to put the css inside of a style attribute. Styles that are in an external css file will not get applied in most browser as this is a security restriction. For example:

<svg id="mySVG" style="position: absolute; top: 200px; left: 200px;"></svg>

This technique is supported by all browsers except IE8 and below as well as the android 2.3 browser and below.

Read the chapter inline SVG for further details:

css-tricks.com Using SVG
developer.mozilla.org SVG In HTML Introduction

If you dont want to put it inline in your page then the best alternative seems to be the object tag and avoid using the embed tag.

Read this for further details about object vs embed vs img tag:

How to Add Scalable Vector Graphics to Your Web Page

How to use .svg files in a webpage?

Solution 1:

Solution 2:

Solution 3:

Related

Recent Posts