下の例は、HTML コード内に直接 SVG コードを埋め込んでいます。
これは、Firefox、Internet Explorer 9、Google Chrome、Opera、Safari によりサポートされています。
円形
矩形
不透明度を持つ矩形
不透明度を持つ矩形 2
角の丸い矩形
楕円形
互いの上に重なる 3 つの楕円
2 つの楕円形
線
3 つの辺を持つポリゴン
4 つの辺を持つポリゴン
星形
別な星
ポリライン
別なポリライン
パス
2 次ベジェ曲線
テキスト描画
テキストの回転
複数線上のテキスト
リンクとしてのテキスト
線、テキスト、アウトラインの色を定義する (stroke)
線、テキスト、アウトラインの幅を定義する (stroke-width)
オープンパスの線の終端にいろいろなタイプを定義します (stroke-linecap)
破線を定義する (stroke-dasharray)
feGaussianBlur - ぼかし効果
feOffset - 矩形をオフセットし、オフセット画像の上にオリジナルを混合する
feOffset - オフセット画像をぼかす
feOffset - 影を黒にする
feOffset - 色として影を扱う
feBlend フィルタ
フィルタ 1
フィルタ 2
フィルタ 3
フィルタ 4
フィルタ 5
フィルタ 6
黄色から赤色への水平線形グラデーションを持つ楕円形
黄色から赤色への垂直線形グラデーションを持つ楕円形
黄色から赤色への水平線形グラデーションとテキストを持つ楕円形
白から青への円形グラデーションを持つ楕円形
白から青への円形グラデーションを持つ他の楕円形
5 秒かけて繰り返し消えていく矩形
色を変えながら大きくなる矩形
色を変える 3 つの矩形
モーションパスに沿って移動するテキスト
モーションパスに沿って、移動、回転、伸縮するテキスト
モーションパスに沿って、移動、回転、伸縮するテキスト + 色を変えながら大きくなる矩形
回転する楕円