SVG Examples

Online Examples

The following examples embed SVG code directly into HTML code.

Almost all modern browsers support SVG (Scalable Vector Graphics) format.

The following is the support status of some major browsers:

  1. Google Chrome: Full support for SVG, starting from version 1.0.
  2. Mozilla Firefox: Full support for SVG, starting from version 1.5.
  3. Microsoft Edge: Full support for SVG.
  4. Safari: Full support for SVG, starting from version 3.1.
  5. Opera: Full support for SVG, starting from version 9.0.

Mobile browser support:

  • iOS Safari: Full support for SVG.
  • Android Browser: Full support for SVG.
  • Chrome for Android: Full support for SVG.

SVG Examples

SVG Basic Shapes

The stroke-linecap attribute defines different types of endings for open paths:

SVG Filters

feOffset - Offset a rectangle, then blend the offset image on top

SVG Gradients

Horizontal linear gradient from yellow to red with text inside the ellipse

SVG Misc

Text moving, rotating, and scaling along a motion path + a rectangle that gradually enlarges and changes color

Other extensions