Memulai SVG di AppSheet (Scalable Vector Graphics)

SVG (Scalable Vector Graphics) adalah format gambar berbasis vektor yang digunakan untuk menggambarkan grafik dua dimensi. SVG dibuat dan dikelola oleh World Wide Web Consortium (W3C). Berikut adalah beberapa karakteristik dan keunggulan dari SVG:

1. Berbasis Vektor: Berbeda dengan format gambar berbasis raster seperti JPEG atau PNG, SVG menggunakan definisi matematis untuk menggambarkan bentuk, garis, dan warna. Ini berarti SVG dapat diperbesar atau diperkecil tanpa kehilangan kualitas atau kejelasan.
2. File Teks: SVG disimpan dalam format XML (Extensible Markup Language), yang memungkinkan untuk diedit dengan teks editor dan diproses oleh perangkat lunak lain dengan mudah. Anda bisa membuka file SVG dengan teks editor dan melihat atau mengubah kode yang mendefinisikan gambar.
3. Interaktivitas dan Animasi: SVG mendukung interaktivitas dan animasi. Elemen-elemen SVG dapat diprogram dengan menggunakan JavaScript untuk membuat grafik yang interaktif, seperti grafik yang berubah warna saat disentuh atau diagram yang bisa diperbesar dengan klik.
4. Kompabilitas Browser: Sebagian besar browser modern mendukung SVG secara native, yang membuatnya ideal untuk digunakan di web. Anda bisa menyematkan file SVG langsung ke dalam halaman HTML dengan menggunakan tag <svg>.
5. Ukuran File Kecil: Karena SVG berbasis vektor, ukuran file biasanya lebih kecil dibandingkan dengan format gambar berbasis raster, terutama untuk gambar dengan banyak detail geometris.
6. Kualitas Tinggi: SVG ideal untuk logo, ikon, diagram, dan gambar lain yang membutuhkan kualitas tinggi dalam berbagai ukuran.

Berikut adalah contoh sederhana dari kode SVG di dalam AppSheet.

Tabel data AppSheet yang digunakan

Kolom SVG1 RECT

CONCATENATE("data:image/svg+xml;utf8, <svg xmlns=""http://www.w3.org/2000/svg"" viewBox=""0 0 160 70""> 

<defs>

 <linearGradient id=""grad1"" x1=""0%"" y1=""0%"" x2=""100%"" y2=""0%"">

      <stop offset=""0%"" style=""stop-color:%23FFFFFF;stop-opacity:1"" />

      <stop offset=""100%"" style=""stop-color:%23DE3163;stop-opacity:1"" />

    </linearGradient>

  </defs>

  

  <rect x=""5"" y=""",

if(and(or(13>5,12>5), [number]<decimal(.30)), 10+((7-(7*([number]/decimal(.30))))/2), 10),""" rx=""12"" ry=""13"" width=""",[number]*1.5,"""  

height=""",

if(and(12>5,[number]<decimal(.30)), (50-(12-if(or(12>19, 13>19),-7,5)))+((12-if(or(12>19, 13>19),-7,5))*([number]/decimal(.30))), 50)

,""" 

stroke=""grey"" fill=""url(%23grad1)"" stroke-opacity=""0.1""  />

<rect x=""5"" y=""10"" rx=""12"" ry=""13"" width=""150"" height=""50"" stroke=""grey"" stroke-width = ""2"" fill=""none""  />

<text font-family=""Roboto,Arial,sans-serif"" font-size=""30px"" font-weight=""300"" stroke-width=""5"" text-anchor=""middle"" fill=""%23000000"" x=""50%"" y=""45"">",[number],"%</text>

</svg>")

Kolom SVG1 CIRCLE

CONCATENATE("data:image/svg+xml;utf8, <svg xmlns=""http://www.w3.org/2000/svg"" viewBox=""0 0 160 160""> 

<defs>

<linearGradient id=""grad1"" x1=""0%"" y1=""0%"" x2=""100%"" y2=""0%"">

      <stop offset=""0%"" style=""stop-color:%2300467F;stop-opacity:1"" />

      <stop offset=""100%"" style=""stop-color:%23A5CC82;stop-opacity:1"" />

    </linearGradient>

  </defs>

  <circle cx=""80"" cy=""80"" r=""60"" fill=""white"" stroke=""grey"" stroke-width=""1"" /> 

  <circle cx=""80"" cy=""80"" r=""60"" fill=""white"" stroke=""grey"" stroke-width=""1"" /> 

  <circle cx=""40"" cy=""80"" r=""60"" fill=""none"" stroke=""url(%23grad1)"" stroke-width=""20"" stroke-dasharray=""376.991118"" stroke-dashoffset=""",376.991118*(1-[percent]),""" transform=""rotate(-90 60 60)""/> 

  <text font-family=""Roboto,Arial,sans-serif"" font-size=""40px"" font-weight=""300"" stroke-width=""5"" text-anchor=""middle"" fill=""rgb(88,89,91)"" x=""52.5%"" y=""60%"">",[number],"<tspan font-size=""20px"" fill=""","black",""" style=""baseline-shift: super"">%</tspan></text>

</svg>")

Kolom Percent

[Number]/100

Semoga Bermanfaat.