Skip to main content

Explore HTML SVG: Create Scalable Vector Graphics for Web

SVG (Scalable Vector Graphics) is a markup language used to create vector graphics. It is used to create graphics, animations, and interactive applications on the web. Unlike bitmap images, SVG graphics are scalable, meaning they can be resized without losing quality.

As an example:

Editor

Loading...

In this example:

  • We create an SVG element with a width and height of 400 pixels. Inside the <svg> element, we draw a circle with a center at (200,200), a radius of 100 pixels, and a fill color of red.
  • The cx, cy, and r attributes define the circle's center coordinates and radius, respectively.

SVG Supports​

SVG supports a wide range of graphics primitives, including lines, polygons, rectangles, ellipses, arcs, and more. You can also add text, images, and filters to SVG elements.

Example of how to draw a rectangle in SVG:

Editor

Loading...

In this example:

  • We create an SVG element with a width and height of 400 pixels. Inside the <svg> element, we draw a rectangle with a top-left corner at (50,50), a width of 300 pixels, a height of 200 pixels, and a fill color of blue.
  • The x, y, width, and height attributes define the rectangle's position and size.

SVG With CSS​

An example of an SVG graphic with CSS styling:

Editor

Loading...

In this example:

  • We create an SVG element that contains a blue rectangle and white text that says "Hello, SVG!" in the center.
  • We also apply some CSS styles to the SVG graphic.
  • The background-color property sets the background color of the SVG element to yellow, and the border property adds a 1-pixel solid black border around the SVG element.
  • The stroke and stroke-width properties are used to add a black border with a width of 5 pixels to the rectangle.
  • The font-family and font-weight properties are used to set the font family to Arial and make the text bold.
info

You can add any CSS styling that you would normally use in HTML to an SVG graphic. This includes properties like color, font-size, text-align, and more.