SVG is the abbreviation of Scalable Vector Graphics. It uses XML format text to define vector graphics. It is recommended by W3C to draw graphics on the Html web pages. This article will tell you how to use SVG in the Html web page to draw Circle, Ellipse, Rectangle, Square, Polygon shapes with some examples.
1. How To Use SVG In Html Web Pages.
- You can use the Html <svg></svg> tag to create a vector graphic on Html web pages like below.
<svg> ...... </svg>
2. Draw SVG Circle Vector Graph.
- The below example uses the SVG circle sub-tag to draw a circle on the Html web page.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Draw svg circle example</title> </head> <body> <!-- the svg area's width is 300, and the height is 300 also, the svg background color is green. --> <svg width="300" height="300" style="background:green"> <!-- create the circle, the circle center point coordinate is (150, 150), the circle radius is 100, the circl color is red, the border color is blue and the border width is 10 pixels. --> <circle cx="150" cy="150" r="100" stroke="blue" stroke-width="10" fill="red" /> </svg> </body> </html>
- When you run the above source code, you will get the below image.
3. Draw SVG Ellipse Vector Graph.
- The below source code uses the SVG ellipse sub-tag to draw an ellipse on an Html web page with linear gradients.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Draw svg ellipse example</title> </head> <body> <svg width="1000" height="1000"> <defs> <!-- define a linear gradient object. x1 : the x axis left point gradient transparency percentage. x2 : the x axis right point gradient transparency percentage. y1 : the y axis top point gradient transparency percentage. y2 : the y axis bottom point gradient transparency percentage. --> <linearGradient id="linear_gradient_object_1" x1="0%" y1="0%" x2="100%" y2="100%"> <!-- define the position, color, opacity that will be applied to the above gradient object. offset : define the offset that will draw the color. stop-color : define the color that will be drawn. stop-opacity : define the color opacity percentage. you can define multiple stop elements, the later stop svg graph will cover the former stop svg graph. --> <stop offset="0%" style="stop-color:rgb(255,0,0);stop-opacity:0.9" /> <stop offset="90%" style="stop-color:green;stop-opacity:1" /> </linearGradient> </defs> <!-- draw the ellipse shape on the html web page, the center point coordinate is (100, 50), this point is relative to the other svg graph. the long axis is 100, the short axis is 50, it will use the above linear gradient definition. --> <ellipse cx="100" cy="50" rx="100" ry="50" fill="url(#linear_gradient_object_1)" /> </svg> </body> </html> - Below is the above example Html web page.
4. Draw SVG Rectangle Vector Graph.
- The below source code will use the SVG rect sub-tag to draw a vector rectangle on the Html web page.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Draw svg rectangle example</title> </head> <body> <!-- draw a rectangle vector graph use svg, define svg vector graph width, height, and background color. --> <svg width="800" height="200" style="background: red"> <!-- draw the rectangle, x, y is the top left point coordinates in the svg graph. fill: the rectangle filled color is green. stroke: the rectangle border color is blue. stroke-width: the rectangle border width is 16. --> <rect x="150" y="50" width="500" height="100" style="fill:rgb(0,255,0);stroke-width:16;stroke:blue" /> </svg> </body> </html> - Below is the above example execution result.
5. Draw SVG Rounded Square Vector Graph.
- The below source code will draw a rounded corner square vector graph using the Html SVG rect tag also.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Draw svg rounded corner square example</title> </head> <body> <!-- draw a rounded corner square example --> <svg width="400" height="300"> <!-- draw a rectangle with same width and height, that means it is a square. x, y: the square top left corner coordinates. rx, ry: the rounded corner radius value. width, height: the square widht and height, the value should be same. style: the css style for the square, it will have red color with 80% opacity, green border, border width is 10. --> <rect x="150" y="50" rx="10" ry="10" width="150" height="150" style="fill:red;stroke:green;stroke-width:10;opacity:0.8" /> </svg> </body> </html> - Below is the result of the above source code.
6. Draw SVG Polygon Vector Graph.
- The below example uses the SVG polygon sub-tag to draw 2 polygons on the Html web page.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Draw svg polygon example</title> </head> <body> <!-- draw a regular hexagon use SVG polygon. --> <svg width="300" height="300"> <!-- points: the 5 points coordinates of the regular hexagon. fill: the color of the regular hexagon. stroke: the border color of the regular hexagon. stroke-width: the regular hexagon border width. --> <polygon points="100,10 190,78 160,198 40,198 10,78" style="fill:red;stroke:green;stroke-width:15;fill-rule:nonzero;" /> </svg> <!-- draw a star polygon. --> <svg width="300" height="300"> <polygon points="100,10 40,198 190,78 10,78 160,198" style="fill:yellow;stroke:red;stroke-width:9;fill-rule:evenodd;" /> </svg> </body> </html> - Below is the web page when you browse the above Html code in a web browser.
