SVG in HTML

Do not miss this exclusive book on Binary Tree Problems. Get it now for free.

In this article, we will learn about the SVG tag in HTML.

Introduction to SVG:

  • SVG stands for Scalable Vector Graphics and it is one of the modern ways of displaying images in websites and applications just like displaying PNG, GIF, and JPG.
  • In SVG, the shapes are specified in XML. The XML is then rendered by an SVG viewer.
  • Every element and every attribute in SVG files can be animated. SVG is a W3C(World Wide Web Consortium) recommendation.
  • SVG also integrates with other W3C standards such as the DOM(Document Object Model) and XSL(eXtensible Stylesheet Language).
  • SVG is only for 2-dimensional vector graphics. For a 3-dimensional format check X3D which is a royalty-free ISO/IEC standard for declaratively representing 3D computer graphics. X3D also supports XML file format.

SVG in HTML

SVG elements can be directly embedded into HTML websites. The HTML <svg> element is a container for SVG graphics. SVG has several methods for drawing various shapes like paths, circles, text, etc.
Also, there are two ways of using SVG with HTML or any frameworks:

  • Inline svg - used for simple shapes that can be directly written in the HTML file itself
  • External svg - used for drawing complex diagrams and the svg is stored as a something.svg file and it is imported in the HTML page.

Why SVG?

In modern days, SVG is more prefered than traditional image formats like JPG, PNG, GIF, etc because of the following reasons:

  • SVG images can be created and edited with any text editor.
  • SVG images can be searched, indexed, scripted, and compressed.
  • SVG images are scalable.
  • SVG images can be printed with high quality at any resolution.
  • SVG graphics do NOT lose any quality on zooming or resizing.
  • SVG files are pure XML.

Shapes in SVG

1. Circle

<svg width="100" height="100">
    <circle cx="50" cy="50" r="40" stroke="red" stroke-width="4" fill="blue" />
</svg>

2. Rectangle

<svg width="250" height="150">
    <rect width="200" height="100" fill="blue" stroke="red" stroke-width="4"/>
</svg>

3. Square

<svg width="250" height="250">
    <rect width="200" height="200" fill="blue" stroke="red" stroke-width="4"/>
</svg>

4. Ellipse

<svg height="140" width="500">
    <ellipse cx="200" cy="80" rx="100" ry="50" fill="blue" stroke="red" stroke-width="4"/>
</svg>

5. Line

<svg height="210" width="500">
  <line x1="0" y1="0" x2="200" y2="200" stroke="red" stroke-width="4"/>
</svg>

Similarly, we can also draw polygons and custom shapes with SVG.

Text in SVG

In websites, we can directly specify the text contents using the various header tags(h1,h2,...,h6) and the paragraph tag(p). Still, in order to render a text inside an SVG element, we can use the text element.

Text inside a shape:

Text!
<svg height="140" width="500">
    <ellipse cx="200" cy="80" rx="100" ry="50" fill="blue" stroke="red" stroke-width="4"/>
    <text x="180" y="80" fill="yellow">Text!</text>
</svg>

Questions

What does SVG stand for?

Simple Vector Graphics
Simple Vector Graphs
Scalable Vector Graphics
Scalable Vector Graphs
SVG stands for Scalable Vector Graphics.

What does XML stand for?

Extensible Markup Language
Extreme Markup Language
Extensible Markdown Language
Extreme Markdown Language
XML stands for Extensible Markup Language.

SVG graphics lose quality if they are zoomed or re-sized.

True
False
SVG graphics do not lose quality if they are zoomed or re-sized.

Sign up for FREE 3 months of Amazon Music. YOU MUST NOT MISS.