Search anything:


Binary Tree book by OpenGenus

Open-Source Internship opportunity by OpenGenus for programmers. Apply now.

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 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" />

2. Rectangle

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

3. Square

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

4. Ellipse

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

5. Line

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

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:

<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>


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.

SVG graphics do not lose quality if they are zoomed or re-sized.
Share this