Lost password?

SVG Tutorial

SVG files can be embedded into HTML pages with <embed>, <object>, or <iframe>.

SVG code can also be embedded directly into HTML pages, or you can link directly to the SVG file.
Embed SVG With the <embed> Tag

<embed>:

advantage: supported in all major browsers, and allows scripting
disadvantage: deprecated in HTML4 and XHTML (but allowed in HTML5)

Syntax:
<embed src=”circle1.svg” type=”image/svg+xml” />

Result:
Embed SVG With the <object> Tag

<object>:

advantage: supported in all major browsers and is standard in HTML4, XHTML, and HTML5
disadvantage: does not allow scripting

Syntax:
<object data=”circle1.svg” type=”image/svg+xml”></object>

Result:
Embed SVG With the <iframe> Tag

<iframe>:

advantage: supported in all major browsers
disadvantage: generates a window-like border without specific styling, and not allowed in HTML4/XHTML strict DTD

Syntax:
<iframe src=”circle1.svg”></iframe>

Result:
Embed SVG code directly into the HTML

In Firefox, Internet Explorer 9, Google Chrome, and Safari you can also embed the SVG code directly into the HTML code.

Note: This does not work in Opera.
Example
<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>

Try it yourself »
Link to an SVG File

You could also link to an SVG file with the <a> tag:
<a href=”circle1.svg”>View SVG file<a>

For more information on SVG, read the book “Web Standards – Mastering HTML5, CSS3, and XML”.

References

  1. [1] Mason B (2009) When Free Fonts Aren’t Free. Small Batch Inc. http://blog.typekit.com/2009/06/11/when-free-fonts-arent-free/. Accessed 24 January 2011
  2. [2] Kew J, Leming T, van Blokland E (2011) WOFF File Format 1.0. World Wide Web Consortium. www.w3.org/TR/WOFF/. Accessed 07 September 2011
  3. [3] Bos B, Çelik T, Hickson I, Lie HW (2011) Generic font families. In: Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification. W3C Recommendation. World Wide Web Consortium. www.w3.org/TR/CSS2/fonts.html#generic-font-families. Accessed 08 September 2011
  4. [4] Dahlström E, Dengler P, Grasso A, Lilley C, McCormack C, Schepers D, Watt J, Ferraiolo J, Jun F, Jackson D (eds) The ‘font-face’ element. In: Scalable Vector Graphics (SVG) 1.1 (Second Edition). W3C Recommendation. World Wide Web Consortium. www.w3.org/TR/SVG/fonts.html#FontFaceElement. Accessed 07 September 2011
  5. [5] McInerney M (2009) Allerta open source signage typeface. Matt McInerney. http://pixelspread.com/allerta/. Accessed 01 October 2011
  6. [6] Mattsson J (2009) Typeface: Beteckna. Johan Mattsson. http://gnu.ethz.ch/linuks.mine.nu/beteckna/. Accessed 01 October 2011
  7. [7] Gettys J (2010) Bitstream Vera Fonts README. The GNOME Project. http://www-old.gnome.org/fonts/. Accessed 01 October 2011

Reply