Menggunakan SVG untuk Web

Keunggulan SVG dibanding PNG adalah scalable. Sesuai dengan namanya Scalable Vector Graphics. SVG merupakan gambar vector bukan gambar raster / bitmap seperti PNG, JPG, dll.

SVG berbasis XML (teks) sehingga bisa dibaca manusia, diedit menggunakan editor teks seperti Notepad.

Bagaimana cara menambahkan SVG ke halaman web (HTML)?

SVG bisa ditambahkan ke HTML dengan beberapa cara. Seperti tag img, object, atau CSS. Di HTML5, SVG bisa langsung dicampur dengan HTML (Inline SVG).

```
<!DOCTYPE html> 
```
```
<html> 
```
```
    <body> 
```
```
 
```
```
        <svg width="100" height="100"> 
```

            <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />

```
        </svg> 
```
```
 
```
```
    </body> 
```
```
</html> 
```

Kelebihan Inline SVG adalah sama dengan menggunakan skema data URI. Yaitu akan menghemat jumlah HTTP request karena tidak melibatkan resource eksternal.

Karena sifatnya yang scalable, SVG sangat cocok dengan CSS background-size.

SVG sangat cocok digunakan untuk icon pada web modern. Bahkan bisa dibuat sedemikian rupa dengan CSS agar berfungsi layaknya icon font atau icon sprites untuk mengurangi / meminimalisir HTTP request.

#HTML #CSS

696 views 29 April 2019 at 09:51
Updated: 29 April 2019 at 10:36
Author: Administrator