下面的例子是把SVG代碼直接嵌入到HTML代碼中。
谷歌Chrome，火狐，Internet Explorer9，和Safari都支援。
注意：下面的例子将不會在Opera運作，即使Opera支援SVG - 它也不支援SVG在HTML代碼中直接使用。
<b>SVG基本形狀</b>
一個圓
矩形
不透明矩形
一個矩形不透明2
一個帶圓角矩形
一個橢圓
累疊而上的三個橢圓
兩個橢圓
一條線
三角形
四邊形
一個星星
另一個星星
折線
另一個折線
路徑
二次貝塞爾曲線
編寫文字
旋轉文本
路徑上文字
幾行文字
文本連結
定義一條線，文本或輪廓顔色（stroke）
定義一條線寬度，文本或輪廓（stroke-width）
stroke-linecap屬性定義不同類型的開放路徑的終結：
定義虛線（stroke-dasharray）
<b>SVG濾鏡</b>
feGaussianBlur - 模糊效果
feOffset - 偏移一個矩形，然後混合偏移圖像頂部
feOffset - 模糊偏移圖像
feOffset - 使陰影變黑色
feOffset - 為陰影塗上一層顔色
一個feBlend濾鏡
一個feColorMatrix濾鏡
一個feComponentTransfer濾鏡
feOffset、feFlood、feComposite、feMerge 以及 feMergeNode
一個feMorphology濾鏡
濾鏡1
濾鏡2
濾鏡3
濾鏡4
濾鏡5
濾鏡6
<b>SVG漸變</b>
水準線性漸變從黃色到紅色的橢圓形
垂直線性漸變從黃色到紅色橢圓形
水準線性漸變從黃色到紅色并添加一個橢圓内文本
放射性漸變從白色到藍色橢圓
放射性漸變從白色到藍色的另一個橢圓
<b>SVG雜項</b>
重複用 5 秒時間淡出的矩形
矩形會變大并改變顔色
會改變顔色的三個矩形
沿一個運動路徑移動的文本
沿一個運動路徑移動、旋轉并縮放的文本
沿一個運動路徑移動、旋轉并縮放的文本 + 逐漸放大并改變顔色的矩形