SVG in HTML

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:

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