Kepanjangan SVG adalah Scalable Vector Graphic, merupakan image vector yang disupport oleh browser. SVG didefinisikan dalam bentuk XML.
Keuntungan SVG
- SVG dapat dibuat dan diedit menggunakan text editor, walaupun tentu lebih nyaman menggunakan image editor seperti Inkscape.
- Karena formatnya XML, dapat di-search, di-index, di-scripted dan di-compressed.
- Tentunya scalable, dapat dibesarkan dan dikecilkan tanpa merusak kualitas.
- Siap untuk kualitas printing.
- Bisa dianimasikan, silakan lihat contohnya disini
- Open Standard.
Namun tidak semua browse support SVG, silakan cek disini
Berikut contoh penggunaan element <svg> dan hasilnya.
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="396.74px" height="560px" viewBox="281.63 0 396.74 560" enable-background="new 281.63 0 396.74 560" xml:space="preserve"
>
<g>
<g>
<g>
<polygon fill="#E44D26" points="409.737,242.502 414.276,293.362 479.828,293.362 480,293.362 480,242.502 479.828,242.502
"/>
<path fill="#E44D26" d="M281.63,110.053l36.106,404.968L479.757,560l162.47-45.042l36.144-404.905H281.63z M611.283,489.176
L480,525.572V474.03l-0.229,0.063L378.031,445.85l-6.958-77.985h22.98h26.879l3.536,39.612l55.315,14.937l0.046-0.013v-0.004
L480,422.35v-79.32h-0.172H368.853l-12.207-136.871l-1.189-13.325h124.371H480v-49.668h162.17L611.283,489.176z"/>
<polygon fill="#F16529" points="480,192.833 604.247,192.833 603.059,206.159 600.796,231.338 599.8,242.502 599.64,242.502
480,242.502 480,293.362 581.896,293.362 595.28,293.362 594.068,306.699 582.396,437.458 581.649,445.85 480,474.021
480,474.03 480,525.572 611.283,489.176 642.17,143.166 480,143.166 "/>
<polygon fill="#F16529" points="540.988,343.029 480,343.029 480,422.35 535.224,407.445 "/>
<polygon fill="#EBEBEB" points="414.276,293.362 409.737,242.502 479.828,242.502 479.828,242.38 479.828,223.682
479.828,192.833 355.457,192.833 356.646,206.159 368.853,343.029 479.828,343.029 479.828,293.362 "/>
<polygon fill="#EBEBEB" points="479.828,474.069 479.828,422.4 479.782,422.413 424.467,407.477 420.931,367.864
394.052,367.864 371.072,367.864 378.031,445.85 479.771,474.094 480,474.03 480,474.021 "/>
<polygon points="343.784,50.229 366.874,50.229 366.874,75.517 392.114,75.517 392.114,0 366.873,0 366.873,24.938
343.783,24.938 343.783,0 318.544,0 318.544,75.517 343.784,75.517 "/>
<polygon points="425.307,25.042 425.307,75.517 450.549,75.517 450.549,25.042 472.779,25.042 472.779,0 403.085,0
403.085,25.042 425.306,25.042 "/>
<polygon points="508.537,38.086 525.914,64.937 526.349,64.937 543.714,38.086 543.714,75.517 568.851,75.517 568.851,0
542.522,0 526.349,26.534 510.159,0 483.84,0 483.84,75.517 508.537,75.517 "/>
<polygon points="642.156,50.555 606.66,50.555 606.66,0 581.412,0 581.412,75.517 642.156,75.517 "/>
<polygon fill="#FFFFFF" points="480,474.021 581.649,445.85 582.396,437.458 594.068,306.699 595.28,293.362 581.896,293.362
480,293.362 479.828,293.362 479.828,343.029 480,343.029 540.988,343.029 535.224,407.445 480,422.35 479.828,422.396
479.828,422.4 479.828,474.069 "/>
<polygon fill="#FFFFFF" points="479.828,242.38 479.828,242.502 480,242.502 599.64,242.502 599.8,242.502 600.796,231.338
603.059,206.159 604.247,192.833 480,192.833 479.828,192.833 479.828,223.682 "/>
</g>
</g>
</g>
</svg>