Adding vector graphics to the Web

This translation is incomplete. Please help translate this article from English

Grafik vektor sangat berguna dalam banyak keadaan — mereka memiliki ukuran file kecil dan sangat skalabel, sehingga mereka tidak terlalu besar ketika diperbesar atau meledak hingga ukuran besar. Dalam artikel ini kami akan menunjukkan kepada Anda bagaimana memasukkan satu di halaman web Anda.

Prerequisites: Anda harus tahu basics of HTML dan bagaimana caranya insert an image into your document.
Objective: Pelajari cara menyematkan gambar SVG (vektor) ke halaman web.

Note: Artikel ini tidak bermaksud mengajarkan Anda SVG; hanya apa itu, dan bagaimana menambahkannya ke halaman web.

Apa itu grafik vektor?

Di web, Anda akan bekerja dengan dua jenis gambar — gambar raster, dan gambar vektor:

  • Gambar raster didefinisikan menggunakan kisi-kisi piksel - file gambar raster berisi informasi yang menunjukkan dengan tepat di mana setiap piksel ditempatkan, dan persis apa warna yang seharusnya. Popular web raster formats include Bitmap (.bmp), PNG (.png), JPEG (.jpg), and GIF (.gif.)
  • Gambar vektor didefinisikan menggunakan algoritme - file gambar vektor berisi definisi bentuk dan jalur yang dapat digunakan komputer untuk mengetahui seperti apa gambar itu ketika ditampilkan di layar. The SVG format memungkinkan kita membuat grafik vektor yang kuat untuk digunakan di Web.

Untuk memberi Anda gambaran tentang perbedaan antara keduanya, mari kita lihat sebuah contoh. Anda dapat menemukan contoh ini langsung di repo Github kami sebagai vector-versus-raster.html — itu menunjukkan dua gambar yang tampaknya identik berdampingan, dari bintang merah dengan bayangan hitam. Perbedaannya adalah yang kiri adalah PNG, dan yang kanan adalah gambar SVG.

Perbedaannya menjadi jelas ketika Anda memperbesar halaman - gambar PNG menjadi pixelated saat Anda memperbesar karena berisi informasi di mana masing-masing piksel harus (dan apa warna). Ketika diperbesar, setiap piksel hanya bertambah ukurannya untuk mengisi beberapa piksel pada layar, sehingga gambar mulai tampak ganjil. Namun gambar vektor terus terlihat bagus dan segar, karena berapapun ukurannya, algoritma tersebut digunakan untuk mencari tahu bentuk-bentuk pada gambar, dengan nilai-nilai yang hanya diskalakan karena semakin besar.

Two star images

Two star images zoomed in, one crisp and the other blurry

Note: Gambar-gambar di atas sebenarnya semua PNG - dengan bintang kiri di setiap kasus mewakili gambar raster, dan bintang kanan mewakili gambar vektor. Again, go to the vector-versus-raster.html demo for a real example!

Selain itu, file gambar vektor jauh lebih ringan daripada raster mereka, karena mereka hanya perlu memegang beberapa algoritma, daripada informasi tentang setiap pixel dalam gambar secara individual.

What is SVG?

SVG is an XML-based bahasa untuk menggambarkan gambar vektor. Ini pada dasarnya markup, seperti HTML, kecuali bahwa Anda memiliki banyak elemen berbeda untuk menentukan bentuk yang ingin Anda tampilkan di gambar Anda, dan efek yang ingin Anda terapkan pada bentuk-bentuk itu. SVG adalah untuk menandai grafik, bukan konten. Di ujung paling sederhana dari spektrum, Anda memiliki elemen untuk membuat bentuk sederhana, seperti <circle> dan <rect>. More advanced SVG features include <feColorMatrix> (transform colors using a transformation matrix,) <animate> (animate parts of your vector graphic,) and <mask> (apply a mask over the top of your image.)

Sebagai contoh sederhana, kode berikut ini membuat lingkaran dan persegi panjang:

<svg version="1.1"
     baseProfile="full"
     width="300" height="200"
     xmlns="http://www.w3.org/2000/svg">
  <rect width="100%" height="100%" fill="black" />
  <circle cx="150" cy="100" r="90" fill="blue" />
</svg>

This creates the following output:

Dari contoh di atas, Anda mungkin mendapat kesan bahwa SVG mudah untuk handcode. Ya, Anda dapat membuat kode tangan SVG sederhana dalam editor teks, tetapi untuk gambar yang kompleks ini dengan cepat mulai menjadi sangat sulit. For creating SVG images, most people use a vector graphics editor like Inkscape or Illustrator. Paket-paket ini memungkinkan Anda untuk membuat berbagai ilustrasi menggunakan berbagai alat grafis, dan membuat perkiraan foto (misalnya fitur Trace Bitmap dari Inkscape.)

SVG memiliki beberapa keuntungan tambahan selain yang dijelaskan sejauh ini:

  • Teks dalam gambar vektor tetap dapat diakses (yang juga bermanfaat bagi Anda SEO).
  • SVG cocok untuk styling / scripting, karena setiap komponen gambar adalah elemen yang dapat ditata melalui CSS atau dituliskan melalui JavaScript.

Jadi mengapa ada orang yang mau menggunakan grafik raster di atas SVG? Nah, SVG memang memiliki beberapa kelemahan:

  • SVG bisa menjadi rumit dengan sangat cepat, artinya ukuran file bisa bertambah; SVG yang kompleks juga dapat mengambil waktu pemrosesan yang signifikan di browser.
  • SVG bisa lebih sulit untuk dibuat daripada gambar raster, tergantung pada jenis gambar apa yang Anda coba buat.
  • SVG tidak didukung di peramban yang lebih lama, jadi mungkin tidak cocok jika Anda perlu mendukung versi Internet Explorer yang lebih lama dengan situs web Anda (SVG mulai didukung pada IE9.)

Grafik raster bisa dibilang lebih baik untuk gambar presisi kompleks seperti foto, karena alasan yang dijelaskan di atas.

Note: Di Inkscape, simpan file Anda sebagai Plain SVG untuk menghemat ruang. Juga, silakan lihat ini article describing how to prepare SVGs for the Web.

Adding SVG to your pages

In this section we'll go through the different ways in which you can add SVG vector graphics to your web pages.

The quick way: <img>

To embed an SVG via an <img> element, you just need to reference it in the src attribute as you'd expect. You will need a height or a width attribute (or both if your SVG has no inherent aspect ratio). If you have not already done so, please read Images in HTML.

<img 
    src="equilateral.svg" 
    alt="triangle with all three sides equal"
    height="87"
    width="100" />

Pros

  • Sintaks gambar cepat dan dikenal dengan teks bawaan yang tersedia di alt attribute.
  • You can make the image into a hyperlink easily by nesting the <img> inside an <a> element.
  • File SVG dapat di-cache oleh browser, menghasilkan waktu pemuatan yang lebih cepat untuk setiap halaman yang menggunakan gambar yang dimuat di masa depan.

Cons

  • You cannot manipulate the image with JavaScript.
  • If you want to control the SVG content with CSS, you must include inline CSS styles in your SVG code. (External stylesheets invoked from the SVG file take no effect.)
  • You cannot restyle the image with CSS pseudoclasses (like :focus).

Troubleshooting and cross-browser support

For browsers that don't support SVG (IE 8 and below, Android 2.3 and below), you could reference a PNG or JPG from your src attribute and use a srcset attribute (which only recent browsers recognize) to reference the SVG. This being the case, only supporting browsers will load the SVG — older browsers will load the PNG instead:

<img src="equilateral.png" alt="triangle with equal sides" srcset="equilateral.svg">

Anda juga dapat menggunakan SVG sebagai gambar latar belakang CSS, seperti yang ditunjukkan di bawah ini. Dalam kode di bawah ini, browser lama akan tetap dengan PNG yang mereka pahami, sementara browser yang lebih baru akan memuat SVG:

background: url("fallback.png") no-repeat center;
background-image: url("image.svg");
background-size: contain;

Like the <img> method described above, inserting SVGs using CSS background images means that the SVG can't be manipulated with JavaScript, and is also subject to the same CSS limitations.

Jika SVG Anda tidak muncul sama sekali, itu mungkin karena server Anda tidak diatur dengan benar. Jika itu masalahnya, ini article will point you in the right direction.

How to include SVG code inside your HTML

Anda juga dapat membuka file SVG dalam editor teks, menyalin kode SVG, dan menempelkannya ke dokumen HTML Anda — this is sometimes called putting your SVG inline, or inlining SVG. Pastikan cuplikan kode SVG Anda dimulai dan diakhiri dengan <svg></svg> tags (don't include anything outside those.) Berikut adalah contoh yang sangat sederhana dari apa yang mungkin Anda tempel ke dalam dokumen Anda:

<svg width="300" height="200">
    <rect width="100%" height="100%" fill="green" />
</svg>

Pros

  • Menempatkan inline SVG Anda menghemat permintaan HTTP, dan karenanya dapat mengurangi sedikit waktu pemuatan Anda.
  • You can assign classes and ids to SVG elements and style them with CSS, either within the SVG or wherever you put the CSS style rules for your HTML document. In fact, you can use any SVG presentation attribute as a CSS property.
  • Inlining SVG adalah satu-satunya pendekatan yang memungkinkan Anda menggunakan interaksi CSS (like :focus) and CSS animations on your SVG image (even in your regular stylesheet.)
  • Anda dapat membuat markup SVG menjadi hyperlink dengan membungkusnya dengan <a> element.

Cons

  • Metode ini hanya cocok jika Anda menggunakan SVG hanya di satu tempat. Duplikasi membuat pemeliharaan intensif sumber daya.
  • Kode SVG tambahan meningkatkan ukuran file HTML Anda.
  • Browser tidak dapat men-cache inline SVG karena akan men-cache aset gambar biasa, sehingga halaman yang menyertakan gambar tidak akan memuat lebih cepat setelah halaman pertama berisi gambar dimuat.
  • You may include fallback in a <foreignObject> element, tetapi browser yang mendukung SVG masih mengunduh gambar yang mundur. Anda perlu mempertimbangkan apakah overhead tambahan benar-benar berharga, hanya untuk mendukung browser yang usang.

How to embed an SVG with an <iframe>

Anda dapat membuka gambar SVG di browser Anda seperti halnya halaman web. Jadi menanamkan dokumen SVG dengan <iframe> is done just like we studied in From <object> to <iframe> — other embedding technologies.

Here's a quick review:

<iframe src="triangle.svg" width="500" height="500" sandbox>
    <img src="triangle.png" alt="Triangle with three unequal sides" />
</iframe>

Ini jelas bukan metode terbaik untuk memilih:

Cons

  • iframes do have a fallback mechanism, as you can see, but browsers only display the fallback if they lack support for iframes altogether.
  • Selain itu, kecuali SVG dan halaman web Anda saat ini memiliki yang sama origin, Anda tidak dapat menggunakan JavaScript di halaman web utama Anda untuk memanipulasi SVG.

Active Learning: Playing with SVG

Di bagian pembelajaran aktif ini kami ingin Anda bersenang-senang bermain SVG untuk bersenang-senang. Di bagian Input di bawah ini Anda akan melihat bahwa kami telah menyediakan beberapa sampel untuk Anda mulai. Anda juga dapat pergi ke SVG Element Reference, cari tahu lebih detail tentang mainan lain yang bisa Anda gunakan di SVG, dan coba juga itu. Bagian ini adalah tentang mempraktekkan keterampilan riset Anda, dan bersenang-senang.

If you get stuck and can't get your code working, you can always reset it using the Reset button.

Summary

Artikel ini telah memberi Anda tur singkat tentang apa itu vektor grafik dan SVG, mengapa mereka berguna untuk diketahui, dan bagaimana memasukkan SVG ke dalam halaman web Anda. Itu tidak pernah dimaksudkan sebagai panduan lengkap untuk mempelajari SVG, hanya sebuah petunjuk sehingga Anda tahu apa itu SVG jika Anda bertemu dalam perjalanan Anda di Web. Jadi jangan khawatir jika Anda belum merasa sudah ahli SVG. Kami telah menyertakan beberapa tautan di bawah ini yang mungkin membantu Anda jika Anda ingin pergi dan mencari tahu lebih lanjut tentang cara kerjanya.

Pada artikel terakhir modul ini, kami akan mengeksplorasi gambar responsif secara terperinci, dengan melihat alat-alat HTML yang memungkinkan Anda membuat gambar Anda bekerja lebih baik di berbagai perangkat.

See also

In this module