Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

html
communitycreator

What is the HTML < svg > element?

AKASH BAJWA

Grokking Modern System Design Interview for Engineers & Managers

Ace your System Design Interview and take your career to the next level. Learn to handle the design of applications like Netflix, Quora, Facebook, Uber, and many more in a 45-min interview. Learn the RESHADED framework for architecting web-scale applications by determining requirements, constraints, and assumptions before diving into a step-by-step design process.

The <svg> element in HTMLHypertext markup language is used to support SVG graphics. SVG graphics include a container that we can use to draw multiple shapes like boxes, paths, text, graphic images, and circles. Almost every latest browser supports this HTML tag.

What is SVG?

  • SVG is an abbreviation for Scalable Vector Graphics.
  • You can use SVG to generate vector-based graphics for the web.
  • SVG defines the graphics in XML format describing 2D-based vector graphics.
  • Every attribute or element in SVG files can be animated, as well as recommended by W3C standards.
  • SVG also supports DOM and XSL, which are W3C standards.

Syntax

<svg width="x" height="y"> shape_tags... </svg>

Shapes Element

The <svg> element can draw multiple shapes with different attributes. Here are some elements to draw different shapes like circles, ellipses, polygons etc.

Useful Elements for Shapes

Tag

Attribute

Description

<rect />

width and height

Generates multiple shapes like squares, rectangles, etc.

<polygon />

points

Generates polygons like stars, pentagons, etc.

<ellipse />

cx, cy, rx, and ry

Draws ellipse-like shapes.

<circle />

 cx, cy, and r

Draws circles of every shape.

Demo Code

Using the <svg> element in lines 7, 12, and 17 generates a circle, rectangle, and star, respectively. The objects or SVG images are of different widths and heights, with a black border and filled red color.

  • HTML
<svg> HTML ELEMENT

RELATED TAGS

html
communitycreator

Grokking Modern System Design Interview for Engineers & Managers

Ace your System Design Interview and take your career to the next level. Learn to handle the design of applications like Netflix, Quora, Facebook, Uber, and many more in a 45-min interview. Learn the RESHADED framework for architecting web-scale applications by determining requirements, constraints, and assumptions before diving into a step-by-step design process.

Keep Exploring