SVG Tags

5 useful SVG tags




1. <svg>


Defines the drawing area where SVG graphic elements are placed.


<svg width="300" height="200">
  <!-- Content goes here -->
</svg>

W3C Reference



2. <circle>


Draws a circle defined by its center (cx, cy) and its radius (r).


<circle cx="50" cy="50" r="40" stroke="black" fill="red" />

W3C Reference



3. <rect>


Draws a rectangle using position (x, y), width, and height.


<rect x="10" y="10" width="100" height="50" fill="blue" />

W3C Reference



4. <line>


Draws a line between two points defined by (x1, y1) and (x2, y2).


<line x1="0" y1="0" x2="200" y2="200" stroke="green" stroke-width="2" />

W3C Reference



5. <text>


Displays text within the SVG area, positioning it with x and y attributes.


<text x="10" y="50" fill="black">Hello SVG</text>

W3C Reference