Add SVG to HTML
What is SVG?
SVG stands for Scalable Vector Graphics. It usually defines the vector based graphics in XML format.
SVG is an element in HTML (
<svg>) that is used to define graphics for the web. It is a great technology that allows you to use vector graphics in HTML. It also allows you to describe images that can be rendered clearly at any size. We can also say SVG is to graphics, what HTML is to text. The
<svg> element is a container for many SVG graphics like circles, rectangles, text etc.
<svg> element is supported by almost all major browsers.
Adding SVG to HTML
Now let’s add SVG to HTML and create some graphics.
In an example below let’s write a code and draw a Circle by using SVG tag.
<!DOCTYPE html> <html> <head> <title> SVG Graphics </title> </head> <body> <svg width="100" height="100"> <circle cx="50" cy="50" r="40" stroke="black" stroke-width="4" fill="red" /> </svg> </body> </html>
Here the cx and cy attributes defines the X and Y coordinates of the center of the circle. The attribute r specifies the radius of the circle. By using the fill attribute we can fill the circle with any color we like. In an above example we have fill the circle with red color.
<!DOCTYPE html> <html> <head> <title> SVG Graphics </title> </head> <body> <svg width="400" height="110"> <rect width="300" height="100" stroke="green" stroke-width="4" fill="black" /> </svg> </body> </html>
Here the width and height attribute defines the width and height of the rectangle. We have set the width of the rectangle 300px and height 100px. Stroke attribute defines the border color of the rectangle and stroke-width defines the width of the border. The attribute fill is used to fill the rectangle with any color we want. In an above example we have fill the rectangle with black color.
Learn more about SVG in our SVG Tutorial.