Home > Article > Web Front-end > HTML SVG
HTML SVG
- 王林Original
- 2024-09-04 16:40:001058browse
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:
<!DOCTYPE html> <html> <body> <svg width="500" height="600"> <rect width="400" height="200" style="fill:rgb(0,0,200);stroke-width:5;stroke:rgb(255,0,0)"/> Sorry but this browser does not support inline SVG. </svg> </body> </html>
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:
<!DOCTYPE html> <html> <body> <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" /> Sorry but this browser does not support inline SVG. </svg> </body> </html>
Output:
Example #3 – Drawing a circle in SVG with outline and color filing inside it
Code:
<!DOCTYPE html> <html> <body> <svg width= "400" height= "400"> <circle cx= "100" cy= "100" r="90" stroke= "red" stroke-width="1" fill="grey" /> Sorry but this browser does not support inline SVG. </svg> </body> </html>
Output:
Example #4 – Drawing a straight line with SVG in HTML5
We can use the
Code:
<html> <body> <svg width= "400" height= "400"> <line x1 = "5" y1 = "5" x2 = "300" y2 = "300" style = "stroke:yellow; stroke-width:3"/> </svg> </body> </html>
Output:
Example #5 – Drawing an eclipse via SVG in HTML5
We can use the
Code:
<!DOCTYPE html> <html> <body> <svg height="300" width="300"> <ellipse cx="150" cy="100" rx="120" ry="70" style="fill:brown; stroke:green; stroke-width:3" /> Sorry but this browser does not support inline SVG.</svg> </body> </html>
Output:
Example #6 – Creating a polygon with SVG in HTML5
The tag
Code:
<!DOCTYPE html> <html> <body> <svg height="300" width="600" > <polygon points="10,10 250,250 200,300" style="fill: red; stroke: black; stroke-width: 2" /> Sorry but this browser does not support inline SVG. </svg> </body> </html>
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:
<!DOCTYPE html> <html> <body> <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" /> Sorry but this browser does not support inline SVG. </svg> </body> </html>
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
Code:
<!DOCTYPE html> <html> <body> <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> </body> </html>
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:
<!DOCTYPE html> <html> <body> <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;" /> Sorry but this browser does not support inline SVG. </svg> </body> </html>
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
Code:
<!DOCTYPE html> <html> <body> <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 offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" /> </linearGradient> </defs> <ellipse cx="125" cy="150" rx="100" ry="60" fill="url(#gr1)" /> Sorry but this browser does not support inline SVG. </svg> </body> </html>
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!