HTML SVG

Using images in HTML is awesome for multimedia-rich websites. All you have to do is add a tag to the HTML code, and viola, your browser will display and even add a link to the image of your choice. It gets a little troubling when you know that the image or diagram will be zoomed in because a JPG or PNG won’t show any further detail once it is zoomed in past its resolution. SVG is the solution to this problem. SVG stands for Scalable Vector Graphics. As the name suggests, these can be zoomed in as much as needed, and the details never vanish. SVGs are not exclusive to web technology, but using them in HTML is really neat. SVG is useful for diagrams, vectors, charts, and graphs in the browser.

Syntax of Embedding SVG in HTML:

Similar to using canvas in HTML5, there is a simple tag that you can use to embed SVG in HTML5 pages.

Syntax:

<svg width="width here" height="height here ">
…. …. …. ….
</svg>

Examples of SVG in HTML

Given below are some examples of vectors that can be created and embedded in HTML5:

Example #1 – Drawing a rectangle via SVG in HTML

Code:

<svg width="500" height="600">
<rect width="400" height="200" style="fill:rgb(0,0,200);stroke-width:5;stroke:rgb(255,0,0)"></rect>
Sorry but this browser does not support inline SVG.
</svg>

Output:

Example #2 – Drawing a square with rounded corners in SVG

For a square with rounded corners, we will have to define the radius of the corners with the use of rx, ry aside from the size and dimensions of the square.

Code:

<svg width="500" height="500">
<rect x="100" y="100" rx="30" ry="30" width="300" height="300" style="fill:green stroke:blue; stroke-width:5 ; opacity:0.5"></rect>
Sorry but this browser does not support inline SVG.
</svg>

Output:

Example #3 – Drawing a circle in SVG with outline and color filing inside it

Code:

<svg width="400" height="400">
<circle cx="100" cy="100" r="90" stroke="red" stroke-width="1" fill="grey"></circle>
Sorry but this browser does not support inline SVG.
</svg>

Output:

Example #4 – Drawing a straight line with SVG in HTML5

We can use the tag to draw a straight line in HTML5 SVGs; color, the thickness of line, and position can be defined.

Code:

<svg width="400" height="400">
<line x1="5" y1="5" x2="300" y2="300" style="stroke:yellow; stroke-width:3"></line>
</svg>

Output:

Example #5 – Drawing an eclipse via SVG in HTML5

We can use the tag to draw an eclipse in HTML5 SVGs; its color and position can be defined along die with its radius.

Code:

<svg height="300" width="300">
<ellipse cx="150" cy="100" rx="120" ry="70" style="fill:brown; stroke:green; stroke-width:3"></ellipse>
Sorry but this browser does not support inline SVG.</svg>

Output:

Example #6 – Creating a polygon with SVG in HTML5

The tag can be used in SVGs to create polygons. In the tag, we are required to mention the positions of each point. Filling colors, outline thickness, etc., can be defined in the code too.

Code:

<svg height="300" width="600">
<polygon points="10,10 250,250 200,300" style="fill: red; stroke: black; stroke-width: 2"></polygon>
Sorry but this browser does not support inline SVG. </svg>

Output:

Example #7 – Creating a polyline with SVG in HTML5

Polyline is used to draw a shape that will only consist of a straight line. Keep in mind that these lines must be connected too. Here is an example of a polyline implementation in HTML5.

Code:

<svg height="300" width="600">
<polyline points="10,10 60,60 70,100 80,120 300,200 250,300" style="fill: none; stroke: black; stroke-width: 3"></polyline>
Sorry but this browser does not support inline SVG. </svg>

Output:

Example #8 – Drawing Text with SVG in HTML5

The text could be necessary for any SVG in many situations, such as labeling a chart, etc. Luckily, there exists a tag in SVG which can be used. The text can be set at any position in the SVG, and you can customize its color and other details too.

Code:

<svg height="300" width="500">
<text x="10" y="20" fill="purple" transform="rotate(30 20,40)">Here is an example, it's very examply </text>
Sorry but this browser does not support inline SVG. </svg>

Output:

Example #9 – Drawing a Star with SVG in HTML5

Now that we are done with the basics let’s create a star that will be made with the help of SVG.

Code:

<svg width="400" height="400">
<polygon points="110,10 50,198 200,78 30,78 170,198" style="fill:orange; stroke:green; stroke-width:5; fill-rule:evenodd;"></polygon>
Sorry but this browser does not support inline SVG. </svg>

Output:

Example #10 – Using Linear Gradient in SVG

You can use linear and radial Gradient in SVG much line HTML Canvas. The gradient has to be nested in the tag. This tag is then marked in the SVG tag to denote its usage. Let’s take a look at an example that uses Gradient in an eclipse.

Code:

<svg height="300" width="400">
<defs>
<lineargradient id="gr1" x1="0%" y1="60%" x2="100%" y2="0%">
<stop offset="5%" style="stop-color:rgb(255,255,3);stop-opacity:1"></stop>
<stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1"></stop>
</lineargradient>
</defs>
<ellipse cx="125" cy="150" rx="100" ry="60" fill="url(#gr1)"></ellipse>
Sorry but this browser does not support inline SVG. </svg>

Output:

Conclusion

In the case of sites where diagrams and charts are to be used, SVGs are a lifesaver. Most modern web browsers support SVG, too and aside from being scalable. Another benefit of using SVG is its file size. Because it is just a bit of code, SVGs can have a very small footprint in memory and bandwidth consumed compared to traditional Images.

The above is the detailed content of HTML SVG. For more information, please follow other related articles on the PHP Chinese website!