How to add SVG image in html?

HTML-SVG

Learn how to addd SVG image in HTML: Scalable Vector Graphics (SVG) is an XML-based image format that is used to display 2D vector graphics on webpages. The major benefit of using this image format while displaying images on the web is that images created using it can be scaled up or down without distorting their quality because they are composed using vector shapes instead of pixels. Additional benefits of SVG images include:-

  • An ability to be searched and indexed by search engines.
  • They can contain hyperlinks to other documents
  • Users can print them in high quality at any resolution.
  • SVG images can be animated using a browser?s built in animation elements

The SVG element in HTML 5 allows you to embed images directly on your webpage documents. Additionally, you can draw various shapes using scripted code as we saw with the <canvas> element. Below are a few examples that illustrate how code for drawing various shapes using the <svg> element works.

HTML5 Elements

How to Drawing a line image in SVG?

<svg height="210" width="500">
  <line x1="0" y1="0" x2="200" y2="200" style="stroke:rgb(255,0,0);stroke-width:2" />
</svg>

Hot to Drawing an arch image in SVG?

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
<svg viewBox = "0 0 1100 400" version = "1.1">
    <g stroke = "navy" stroke-width = "3" fill = "none">
        <path d = "M 300 50 a 150 50 0 0 0 250 50"/>
        <path d = "M 300 200 a 150 50 0 0 1 250 50"/>
        <path d = "M 700 50 a 150 50 0 1 0 250 50"/>
        <path d = "M 700 200 a 150 50 0 1 1 250 50"/>
    </g>
    <g text-anchor = "middle" font-size = "25" font = "sans-serif">
        <text x = "400" y = "20">
            large-arc-flag=0
        </text>
        <text x = "825" y = "20">
            large-arc-flag=1
        </text>
    </g>
    <g text-anchor = "end" font-size = "25" font = "sans-serif" rotate = "0">
        <text x = "230" y = "70">
            sweep-flag=0
        </text>
        <text x = "230" y = "220">
            sweep-flag=1
        </text>
    </g>
</svg>

How to Drawing a rectangle image in SVG?

<svg width="400" height="110">
  <rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" />
</svg>

How to Drawing a circle image in SVG?

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

How to Drawing text in SVG?

<svg height="30" width="200">
  <text x="0" y="15" fill="red">I love SVG!</text>
</svg>

Differences between SVG and Canvas Elements

Both <canvas> and <svg> elements are new features that were introduced with HTML 5. They can both be used to create rich graphics for the web, but they have distinct differences. Below is a two-sided table that compares them.

SVGHTML Canvas
SVG has better scalability. So it can be printed with high quality at any resolutionCanvas has poor scalability. Hence it is not suitable for printing on higher resolution
SVG gives better performance with smaller number of objects or larger surface.Canvas gives better performance with smaller surface or larger number of objects.
SVG can be modified through script and CSSCanvas can be modified through script only
SVG is vector based and composed of shapes.Canvas is raster based and composed of pixel.

How to add SVG image

This code will produce the colored shapes shown in the image, excluding the grid and labels:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="391" height="391" viewBox="-70.5 -70.5 391 391" xmlns="http://www.w3.org/2000/svg">
<rect fill="#fff" stroke="#000" x="-70" y="-70" width="390" height="390"/>
<g opacity="0.8">
    <rect x="25" y="25" width="200" height="200" fill="green" stroke-width="4" stroke="pink" />
    <circle cx="125" cy="125" r="75" fill="orange" />
    <polyline points="50,150 50,200 200,200 200,100" stroke="red" stroke-width="4" fill="none" />
    <line x1="50" y1="50" x2="200" y2="200" stroke="blue" stroke-width="4" />
</g>
</svg>

SVG on the web

The use of SVG on the web was limited by the lack of support in older versions of Internet Explorer (IE). Many web sites that serve SVG images, such as Wikipedia, also provide the images in a raster format, either automatically by HTTP content negotiation or by allowing the user directly to choose the file.

Google announced on 31 August 2010 that it had started to index SVG content on the web, whether it is in standalone files or embedded in HTML, and that users would begin to see such content listed among their search results. It was announced on 8 December 2010 that Google Image Search would also begin indexing SVG files. The site announced an option to restrict image searches to SVG files on 11 February 2011. Web search engine can parse and navigate this format.

FAQs

How do I use SVG in HTML?

using the <svg> </svg> tag

Which tag of SVG is used to draw a line?

<line> element 

What is SVG image format?

Scalable Vector Graphics (SVG) is an XML-based vector image format for two-dimensional graphics with support for interactivity and animation.

Does SVG scale?

Scale perfectly to fit within whatever size you give it.

Join Telegram Join Whatsapp