Best IT Recipes

How to use .svg files on a web page?

I want to know how can I use a .svg file on a web page?

+45
image svg image-manipulation adobe-illustrator
Jan 6 '10 at 6:28
source share
7 answers

See svgweb quickstart and the svgweb project start page for something that works in all browsers, including IE (Flash plugin required).

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>
+39
Jan 06 '10 at 8:15
source share

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

The best and easiest method I've found is to use .png or .jpg for your backup placed using a regular img tag. Then you wrap the img tag in the 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 return is only loaded and used if the browser does not understand SVG.

+16
Oct 30
source share

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

Best example:

 <embed src="rect.svg" width="300" height="100" type="image/svg+xml" pluginspage="http://www.adobe.com/svg/viewer/install/" />
+5
Jan 06 '10 at 6:30
source share

Raphaël-JavaScript library . A good javascript library using svg and gives you a wide range of effects!

Also supports most browsers, including IE

+2
Jan 6 '10 at 7:27
source share

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

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

This has the advantage that it allows you to use CSS to style it, for example, changing the fill color or applying filters to it, like blurring. Another advantage is that you save one HTTP request to retrieve the svg file if it is inside your document.

If you want, for example, to change your position with css, then you should put css inside the style attribute. Styles that are in the external css file will not be applied in most browsers, as this is a security restriction. For example:

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

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

Read more in the SVG chapter:

If you do not want to place it on your page, the object tag is the best option and avoid using the embed tag.

Read this for more details on the vs embed vs img tag object:

+2
Sep 23 '13 at 21:00
source share

Caspar's approach is correct. However, I would move the backup to 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); }`
+2
Dec 20 '13 at 13:26
source share

I would like to agree with the answer from "code-zoop". Although this does not technically answer your question, it may also be a solution: enter the relevant data directly into the HTML. Just like an svg element, or using Raphaël-JS.

From w3c schools:

SVG is supported 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 more about how you use it, you can put your 1-color graphics in webfont . (see, for example, iconmoon.io)

+1
Mar 06 '13 at 6:52
source share


More articles:


All Articles