Skip to content

Latest commit

 

History

History
137 lines (97 loc) · 3.79 KB

README.md

File metadata and controls

137 lines (97 loc) · 3.79 KB
Raw

HTML SVG

Apa itu HTML SVG?

Scalable Vector Graphics (SVG) adalah sebuah file gambar yang berformat vektor, baik berupa bentuk sebuah garis, stroke, diagram, peta, atau gambar-gambar ilustrasi lainnya.

Dalam penulisannya SVG menggunakan XML (Extensible Markup Language) sebagai dasar untuk membentuk gambar vektor dua dimensi.

Mengapa harus menggunakan SVG?

Ada beberapa alasan mengapa harus menggunakan SVG, di antaranya :

  • Ketika diperbesar gambar svg tidak pecah.
  • Bisa dibuat dan dimodifikasi dengan text editor.
  • Bisa dijadikan animasi.
  • File SVG lebih kecil dan scalable.
  • Mudah untuk dikompres dibandingkan format lain.

Bagaimana cara menggunakan SVG?

  1. Menggunakan SVG pada tag <img>

    Cara yang paling mudah untuk menerapkan gambar SVG pada sebuah web adalah cukup sisipkan svg pada element <img> dan berikan penjelasan dengan atribut alt, seperti ini :

    <img src="./html-icon.svg" src="icon html" />

    contoh svg img

    karena ukurannya cukup besar maka kita atur lebarnya seperti ini :

    <img src="./html-icon.svg" src="icon html" width="300" />

    contoh svg img

  2. Menggunakan SVG pada inline html

    Langsung ditulis pada document html dengan memberikan tag <svg>.

    <body>
  <svg
    fill="none"
    height="2500"
    width="2183"
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 124 141.53199999999998"
  >
    <path
      d="M10.383 126.894L0 0l124 .255-10.979 126.639-50.553 14.638z"
      fill="#e34f26"
    />
    <path
      d="M62.468 129.277V12.085l51.064.17-9.106 104.851z"
      fill="#ef652a"
    />
    <path
      d="M99.49 41.362l1.446-15.49H22.383l4.34 47.49h54.213L78.81 93.617l-17.362 4.68-17.617-5.106-.936-12.085H27.319l2.128 24.681 32 8.936 32.255-8.936 4.34-48.17H41.107L39.49 41.362z"
      fill="#fff"
    />
  </svg>
</body>

  3. Menggunakan SVG pada tag <iframe>

<iframe src="html-icon.svg" width="800" height="1200"></iframe>

Tidak disarankan untuk menggunakan tag <iframe> karena akan sulit untuk di maintain dan dampak buruk bagi SEO.

  1. Menggunakan SVG pada CSS

Hampir mirip caranya seperti tag <img>, hanya saja kali ini diterapkan pada CSS.

body {
  background-image: url(html-icon.svg);
}

Element SVG

SVG memiliki banyak element di antaranya :

  • <circle>
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="50" />
</svg>

contoh circle

  • <ellipse>
<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
  <ellipse cx="100" cy="50" rx="100" ry="50" />
</svg>

contoh ellipse

  • <line>
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <line x1="0" y1="80" x2="100" y2="20" stroke="black" />
</svg>

contoh line

  • <rect>
<svg viewBox="0 0 220 100" xmlns="http://www.w3.org/2000/svg">
  <rect width="100" height="100" />
</svg>

contoh rect

Untuk selengkapnya kunjungi MDN - SVG element reference

Sumber :