What are the basic SVG shape elements?

SVG has six basic shapes: rect, circle, ellipse, line, polyline, and polygon, plus the general-purpose path. Each takes geometric attributes — rect uses x, y, width, height; circle uses cx, cy, r; path uses the d attribute with a sequence of drawing commands. Everything else builds on these.

What is the difference between g and svg elements?

The svg element establishes a new viewport and coordinate system and can be nested or stand alone as the root. The g element is a grouping container that does not create a viewport; it just lets you apply a transform, style, or attribute to several children at once. Use svg for embedded canvases and g for logical grouping.

How do SVG filter primitives work?

A filter element contains a pipeline of primitives — feGaussianBlur, feOffset, feColorMatrix, feMerge, and others. Each primitive reads an input (SourceGraphic, SourceAlpha, or a named result), processes it, and produces an output that the next primitive can reference. The element you apply the filter to is rendered through that pipeline.

What are paint server elements?

Paint servers define fills and strokes you reference by URL instead of a solid color. linearGradient and radialGradient define color gradients via stop children; pattern tiles a graphic; these are placed in defs and referenced from fill or stroke using url(#id). They let many shapes share one paint definition.

Is this the complete SVG specification?

It covers the elements you meet in everyday SVG authoring across shapes, containers, paint servers, filters, text, and animation. SVG is large and some legacy or rarely-used elements are omitted. For exhaustive, normative detail consult the W3C SVG 2 specification and the MDN SVG element reference.

What is the SVG Elements Reference?

Searchable reference for SVG 2 elements — shapes, text, paint servers, filters, animation, and structural containers — with each element's category, purpose, and key attributes. It runs free in your browser on Gera Tools, with nothing uploaded.

SVG Elements Reference

Name: SVG Elements Reference
Creator: Gera Tools
License: https://creativecommons.org/licenses/by/4.0/

SVG is an XML vocabulary for two-dimensional graphics. Its elements fall into a handful of families — shapes, containers, paint servers, filters, text, and animation — and each renders or contributes to rendering in a specific way. This is a searchable offline reference.

Element families at a glance

Every element is tagged with the category it belongs to and a short description of what it does and the attributes you usually set:

Shapes (rect, circle, path) draw geometry; path is the most general, using the d attribute’s command sequence.
Containers (svg, g, defs, symbol) group and position other elements. Only svg and symbol create a new viewport.
Paint servers (linearGradient, radialGradient, pattern) define fills and strokes referenced via url(#id).
Filters (filter, feGaussianBlur, feMerge) form a pipeline of primitives, each reading an input and producing an output.
Text (text, tspan, textPath) lays out glyphs.
Animation (animate, animateTransform, set) changes attributes over time (SMIL).

The `path` element in detail

path is the most powerful shape element and worth understanding well. Its d attribute takes a mini-language of drawing commands:

M x,y — move to (lifts the pen to a new position)
L x,y — line to (draws a straight line)
H x / V y — horizontal or vertical line
C cx1,cy1 cx2,cy2 x,y — cubic Bézier curve
A rx,ry rot large-arc sweep x,y — elliptical arc
Z — close path (straight line back to the start)

Lowercase versions of each command use relative coordinates. Every SVG icon, logo, and illustration that has curves is built from these commands. Slicers and design tools export path data automatically, but understanding the commands helps you edit paths manually or generate them programmatically.

How filter pipelines connect

A blurred drop shadow shows how filter primitives chain:

<filter id="shadow">
  <feGaussianBlur in="SourceAlpha" stdDeviation="3" result="blur"/>
  <feOffset in="blur" dx="2" dy="2" result="off"/>
  <feMerge>
    <feMergeNode in="off"/>
    <feMergeNode in="SourceGraphic"/>
  </feMerge>
</filter>

SourceAlpha is the element’s silhouette. feGaussianBlur blurs it, producing “blur”. feOffset shifts it down-right to “off”. feMerge stacks the offset shadow below the original graphic. Each primitive’s result attribute names its output for the next primitive to reference via in.

Efficient reuse with `defs`, `symbol`, and `use`

The defs element holds definitions that do not render on their own. Gradients, filters, and symbols all belong there. The use element then clones any defined shape or symbol at a position you specify:

<defs>
  <symbol id="icon" viewBox="0 0 24 24">
    <circle cx="12" cy="12" r="10"/>
  </symbol>
</defs>
<use href="#icon" x="0" y="0" width="24" height="24"/>
<use href="#icon" x="30" y="0" width="24" height="24"/>

This renders two instances of the same icon from a single definition. Changing the symbol changes every use reference simultaneously, making icon systems easy to maintain.

Notes

Reusable definitions (gradients, filters, symbols) go inside defs and are referenced by id so they do not render on their own.
This reference covers the common elements, not the entire SVG 2 specification. For normative detail consult the W3C SVG 2 specification or the MDN SVG element reference.