SVG adalah singkatan dari Scalable Vector Graphics (Grafik Vektor Yang Ukurannya Bisa Diubah). Ini adalah jenis format gambar yang unik untuk grafik berbasis vektor yang ditulis menggunakan Extensible Markup Language (XML).
Dalam tutorial ini, saya akan menjelaskan mengapa kamu harus menggunakan gambar SVG dan bagaimana kamu bisa menggunakannya dalam CSS dan HTML.
Mengapa kamu harus menggunakan SVG?Ada beberapa alasan kamu harus menggunakan gambar SVG, beberapa di antaranya yaitu:
- Gambar SVG tidak berkurang kualitasnya saat diperbesar atau diubah ukurannya.
- Mereka dapat dibuat dan diedit menggunakan IDE atau editor teks.
- Mereka mudah untuk diakses dan dianimasi.
- Mereka memiliki ukuran yang kecil dan dapat diubah ukurannya dengan mudah.
- Mereka dapat dicari, diindeks, disisipkan skrip, dan dikompres.
Sekarang, mari kita lihat bagaimana kamu bisa bekerja dengan gambar SVG.
Cara mengunduh gambar SVG untuk digunakan di tutorial iniJika Anda ingin bermain dengan gambar SVG yang saya gunakan di tutorial ini, ikuti langkah-langkah (dan diagram) berikut untuk mengunduhnya.
- Pergi ke unDraw.
- Ubah warna latar belakang menjadi kuning.
- Dalam kotak pencarian, cari kata happy.
- Klik gambar yang bernama Happy news.
- Pada window yang muncul, klik tombol Download SVG to your projects.
Jika kamu sudah mengikuti langkah-langkah di atas dengan benar, gambar SVGnya seharusnya sudah berada di dalam komputermu.
Sekarang, buka gambar SVGnya menggunakan IDE kesukaanmu atau editor teks. Ubah namanya menjadi happy.svg atau nama apapun yang kamu inginkan.
Cara menggunakan gambar SVG di CSS dan HTMLAda beberapa cara yang berbeda untuk menggunakan gambar SVG di CSS dan HTML. Kita akan melihat enam metode yang berbeda pada tutorial ini.
1. Cara menggunakan SVG sebagai <img>
Ini adalah metode yang paling sederhana untuk menambahkan gambar SVG ke halaman web. Untuk menggunakan metode ini, tambahkan elemen <img> ke dokumen HTMLmu dan referensikan gambarnya di dalam atribut src, seperti ini:
<img src = "happy.svg" alt="SVG Happyku"/>Dengan asumsi kamu mengunduh gambar SVGnya dari unDraw dan menamakannya menjadi happy.svg, silakan lanjutkan dan tambahkan potongan kode di atas ke dalam dokumen HTMLmu.
Jika kamu sudah melakukan semua langkahnya dengan benar, halaman webmu harusnya terlihat seperti demo di bawah ini. 👀
Saat kamu menambahkan gambar SVG menggunakan tag <img> tanpa menetapkan ukurannya, ia berasumsi ukurannya sesuai dengan file SVG yang asli.
Contohnya, pada demo di atas, saya tidak mengubah ukuran gambar SVGnya, jadi ia menganggap ukurannya adalah ukuran aslinya (lebarnya 915.11162px dan tingginya 600.53015px).
Catatan: untuk mengubah ukuran aslinya, kamu harus menetapkan body { background-image: url(happy.svg); } 0 dan body { background-image: url(happy.svg); } 1 menggunakan CSS seperti yang bisa kamu lihat pada demo di bawah. Kamu juga bisa mengubah body { background-image: url(happy.svg); } 0 dan body { background-image: url(happy.svg); } 1nya langsung.
Walaupun kita bisa mengubah ukuran gambar SVG yang ditambahkan melalui tag <img>, ada beberapa halangan jika Anda ingin membuat perubahan besar pada gambar SVGnya.
2. Cara menggunakan SVG sebagai body { background-image: url(happy.svg); } 5 CSS
Ini mirip dengan menambahkan SVG ke dokumen HTML menggunakan tag <img>. Akan tetapi, sekarang kita akan melakukannya dengan CSS alih-alih menggunakan HTML seperti yang kamu bisa lihat pada potongan kode di bawah ini.
body { background-image: url(happy.svg); }Saat kamu menggunakan SVG sebagai latar belakang CSS, metode ini memiliki halangan yang sama seperti <img>. Akan tetapi, ia tetap mengizinkan sedikit lebih banyak perubahan.
Cek demo di bawah ini dan jangan sungkan untuk membuat modifikasi menggunakan CSS.
3. Cara menggunakan gambar SVG dalam baris
Gambar SVG dapat ditulis secara langsung menggunakan tag body { background-image: url(happy.svg); } 8.
Untuk melakukan ini, buka gambar SVG di VS Code atau IDE yang kamu inginkan, salin ke elemen body { background-image: url(happy.svg); } 9 di dokumen HTMLmu.
<body> // Tempelkan kode SVG di sini. </body>Jika semuanya sudah benar, halaman web kamu seharusnya tampak persis seperti demo di bawah ini.
Saat kamu menggunakan SVG dalam baris pada dokumen HTML, waktu memuatnya akan berkurang karena ia bertindak sebagai permintaan HTTP.
Menggunakan metode ini mengizinkanmu untuk melakukan lebih banyak perubahan dibandingkan dengan menggunakan metode <img> atau body { background-image: url(happy.svg); } 5.
4. Cara menggunakan SVG sebagai <body> // Tempelkan kode SVG di sini. </body> 2
Kamu juga bisa menggunakan elemen <body> // Tempelkan kode SVG di sini. </body> 2 HTML untuk menambahkan halaman web menggunakan kode di bawah ini:
<object data="happy.svg" width="300" height="300"> </object>Kamu menggunakan atribut <body> // Tempelkan kode SVG di sini. </body> 4 untuk menetapkan URL sumber daya yang kamu gunakan pada obyeknya, dalam kasus ini gambar SVG.
Kamu menggunakan body { background-image: url(happy.svg); } 0 dan body { background-image: url(happy.svg); } 1 untuk menetapkan ukuran lebar dan tinggi gambar SVGnya.
Lagi, di bawah ini ada demo untuk kamu coba-coba. 😃
<body> // Tempelkan kode SVG di sini. </body> 2 didukung semua browser yang mendukung SVG.
5. Menggunakan SVG sebagai <body> // Tempelkan kode SVG di sini. </body> 8
Meskipun ini tidak disarankan, kamu juga bisa menambahkan gambar SVG menggunakan <body> // Tempelkan kode SVG di sini. </body> 8 seperti yang dapat dilihat pada demo di bawah ini.
Ingat, bahwa <body> // Tempelkan kode SVG di sini. </body> 8 agak susah untuk dipelihara dan akan menjelekkan Search Engine Optimization (SEO) atau Optimasi Mesin Pencari situsmu.
Menggunakan <body> // Tempelkan kode SVG di sini. </body> 8 juga mengalahkan tujuan Scalable pada nama Scalable Vector Graphics karena gambar-gambar SVG yang ditambahkan menggunakan format ini tidak dapat diubah "ukurannya".
6. Cara menggunakan SVG sebagai <embed>
Elemen <object data="happy.svg" width="300" height="300"> </object> 2 HTML adalah cara lain untuk menggunakan gambar SVG pada HTML dan CSS menggunakan kode ini: <object data="happy.svg" width="300" height="300"> </object> 3.
Ingatlah, metode ini memiliki keterbatasannya juga. Menurut MDN, kebanyakan browser modern tidak menyetujui dan mencabut dukungan mereka untuk plug-in browser. Ini berarti menggunakan <object data="happy.svg" width="300" height="300"> </object> 2 bukanlah pilihan yang bijak jika kamu ingin situs kamu bisa beroperasi di browser-browser pengguna pada umumnya.
Di bawah ini ada demo menggunakan elemen <object data="happy.svg" width="300" height="300"> </object> 2 untuk menambahkan gambar SVG.
Conclusion
Saya harap kamu dapat belajar tentang berbagai cara yang berbeda untuk menggunakan gambar SVG di CSS dan HTML. Mudah-mudahan tutorial ini akan membimbing kamu untuk bisa memilih metode yang tepat saat menambahkan gambar SVG ke suatu situs web.
Jika kamu memiliki pertanyaan, kamu bisa mengirimkan pesan di Twitter, dan saya akan dengan senang menjawab semuanya.
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT
I am a software developer who is passionate about technical writing, contributing to open source organizations and building developer communities. Read more posts.
If you read this far, tweet to the author to show them you care. Tweet a thanks
Learn to code for free. freeCodeCamp's open source curriculum has helped more than 40,000 people get jobs as developers. Get started