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
, andr
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
, andheight
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 toyellow
, and theborder
property adds a 1-pixel solid black border around the SVG element. - The
stroke
andstroke-width
properties are used to add a black border with a width of5
pixels to the rectangle. - The
font-family
andfont-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.