How to use .svg files in a webpage?

Question

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

Erik Dahlström · Answer 1 · 2012-03-16T11:25:09.927

61

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>

edited Mar 16 '12 at 11:25

answered Jan 06 '10 at 08:15

Erik Dahlström

59,452
12
120
139

7

My favorite is not in this list, just open your svg in a text editor and put its content inline into your html document, this will allow you to apply filters to it and style the svg image with css. – chrisweb Sep 23 '13 at 21:02
2

@chrisweb That works with ` – Brian McCutchon Jul 05 '14 at 19:10
@chrisweb How does that work with a background image? – Ken Sharp Feb 27 '16 at 15:50
Keep in mind that if you don't include it directly in your content document (like crisweb suggests) you might have something similar to FOUC with your svg making it look like it gets reloaded every time you switch a page. Important for header logos and the like. – Hafenkranich May 16 '17 at 16:58
does any of these methods support changing of svg icon fill color property also? – Arshad Jun 29 '18 at 13:04
@Erik Dahlström, how to display svg image correctly when we have uploaded our svg file to server and then using . – Mahi Nov 05 '18 at 12:34
@Ahmadmnzr verify that the server transmits the svg with the correct svg media type, 'image/svg+xml' – Erik Dahlström Nov 09 '18 at 12:18

score 25 · Answer 2 · answered Oct 30 '12 at 04:09

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.

alternatively move the fallback into the CSS itself – Jerome Dec 20 '13 at 13:22 — Jerome, Dec 20 '13 at 13:22

chrisweb · Answer 3 · 2013-09-23T21:52:34.100

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:

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

Do you know of a way to automate this? Rather than copying from the SVG file and pasting into your HTML, is there a grunt plugin or something that can inject it into your page? — Snowman, Apr 07 '14 at 15:23
nope sorry never heard of such a plugin, but maybe it exists — chrisweb, Apr 19 '14 at 17:28

score 6 · Answer 4 · answered Jan 06 '10 at 06:30

6

http://www.w3schools.com/svg/svg_inhtml.asp

The best example:

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

answered Jan 06 '10 at 06:30

Brian McKenna

45,528
6
61
60

would this actually show the svg image on any browser? Thanks? – Parastar Jan 06 '10 at 06:35
1

Thanks, but whats the 'pluginspage' all about? can't catchup with that one? – Parastar Jan 06 '10 at 07:03
pluginspage tells the browser where to get a plugin if it can't display SVG files natively (e.g. Internet Explorer). – Brian McKenna Jan 06 '10 at 07:18
so the image would not be visiable If the user doesn't download the plugin? – Parastar Jan 06 '10 at 07:29
It would be visible to Firefox, Chrome and Safari users but Internet Explorer users will need to have to plugin installed. If that's a problem then code-zoop's solution does some fancy work to remove the plugin dependency. – Brian McKenna Jan 06 '10 at 08:26
2

Note that code-zoop's solution (RaphaelJS) "removes the plugin dependency" by not actually using SVG at all on IE. If you're looking specifically to display an "svg file", that is probably not going to help you. For SVG + all major browsers, IE users will need a plugin. – Ken Feb 07 '10 at 05:57

score 4 · Answer 5 · answered Dec 20 '13 at 13:26

Caspar's approach is the proper one. However, I would move the fallback to the CSS, since you probably want to apply some styles to the svg file itself...

<object data="/path-to/your-svg-image.svg" type="image/svg+xml"  class="logo"> </object>

CSS

.no-svg .logo {
  width: 99px;
  height: 99px;
  background-image: url(/path-to/your-png-image.png);
}`

code-zoop · Answer 6 · 2018-03-28T21:56:05.423

3

Raphaël—JavaScript Library. Nice javascript library that is using svg, and gives you a large range of effects!

Also supports most browsers, including IE

edited Mar 28 '18 at 21:56

answered Jan 06 '10 at 07:27

code-zoop

7,312
8
47
56

that JS library url is broken btw – Junaid Atari Mar 28 '18 at 21:52
I added the answer 8 years ago. But Hey, here you have the link to the github repo https://github.com/DmitryBaranovskiy/raphael – code-zoop Mar 28 '18 at 21:54

score 2 · Answer 7 · answered Mar 06 '13 at 06:52

I'd like to agree with the answer from "code-zoop". Although this technically doesn't answer your question, it might also be a solution: enter the relevant data straight into the HTML. Either directly as an svg element, or by using Raphaël-JS.

From w3c-schools:

SVG is all suported in In Firefox, Internet Explorer 9, Google Chrome, Opera, and Safari you can

<html>
<body>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <circle cx="100" cy="50" r="40" stroke="black"
  stroke-width="2" fill="red"/>
</svg>

</body>
</html>

(end of quote)

And to think even more outside the box, depending on how you want to use it, you can also put your 1-color graphics in a webfont. (see for example iconmoon.io )

How to use .svg files in a webpage?

7 Answers7

Linked