SVG adalah singkatan dari Scalable Vector Graphics (Grafik Vektor yang Dapat Dikukur). Ini adalah jenis format gambar unik untuk grafik berbasis vektor yang ditulis menggunakan Extensible Markup Language (XML).
Dalam tutorial ini, saya akan menjelaskan mengapa Anda harus menggunakan gambar SVG dan bagaimana Anda dapat menggunakannya dalam CSS dan HTML
Mengapa Anda harus menggunakan SVG?Ada beberapa alasan Anda harus menggunakan gambar SVG, beberapa di antaranya adalah:
- Gambar SVG tidak kehilangan kualitas saat diperbesar atau diubah ukurannya
- Mereka dapat dibuat dan diedit menggunakan IDE atau editor teks
- Mereka mudah diakses dan dianimasikan
- Mereka memiliki ukuran kecil dan dapat diubah ukurannya dengan mudah
- Mereka dapat dicari, diindeks, ditulis, dan dikompresi
Sekarang, mari kita lihat bagaimana Anda bisa bekerja dengan gambar SVG
Cara mengunduh gambar SVG untuk digunakan dalam tutorial iniJika Anda ingin bermain dengan gambar SVG yang saya gunakan dalam tutorial ini, ikuti langkah-langkah (dan diagram) di bawah untuk mengunduhnya
- Buka undraw
- Ubah warna background menjadi kuning
- Di kotak pencarian, cari kata bahagia
- Klik pada gambar yang disebut Berita bahagia
- Di jendela yang muncul, klik tombol Unduh SVG ke proyek Anda
Jika Anda telah mengikuti langkah-langkah di atas dengan benar, gambar SVG seharusnya sudah ada di komputer Anda
Sekarang, buka gambar SVG menggunakan IDE atau editor teks favorit Anda. Ganti nama menjadi bahagia. svg atau nama apa pun yang Anda inginkan
Cara menggunakan gambar SVG di CSS dan HTMLAda beberapa cara berbeda untuk menggunakan gambar SVG di CSS dan HTML. Kami akan melihat enam metode berbeda dalam tutorial ini
1. Cara menggunakan SVG sebagai <img>
Ini adalah metode paling sederhana untuk menambahkan gambar SVG ke halaman web. Untuk menggunakan metode ini, tambahkan elemen <img>_ ke dokumen HTML Anda dan rujuk gambar di atribut src, seperti ini
<img src = "happy.svg" alt="SVG Happyku"/>Dengan asumsi Anda mengunduh gambar SVG dari unDraw dan beri nama bahagia. svg, silakan lanjutkan dan tambahkan cuplikan kode di atas ke dalam dokumen HTML Anda
Jika Anda telah melakukan semua langkah dengan benar, halaman web Anda akan terlihat seperti demo di bawah ini. 👀
Saat Anda menambahkan gambar SVG menggunakan tag <img> tanpa mengatur ukurannya, ini menganggap ukurannya cocok dengan file SVG asli
Misalnya, dalam demo di atas, saya tidak mengubah ukuran gambar SVG, sehingga mengambil dimensi aslinya (lebar 915.11162px dan tinggi 600.53015px)
Catatan. untuk mengubah ukuran aslinya, Anda harus mengatur body { background-image: url(happy.svg); } 0 dan body { background-image: url(happy.svg); } 1 menggunakan CSS seperti yang Anda lihat pada demo di bawah ini. Anda juga dapat mengubah body { background-image: url(happy.svg); } 0 dan body { background-image: url(happy.svg); } 1 secara langsung
Meskipun kami dapat mengubah ukuran gambar SVG yang ditambahkan melalui tag <img>, ada beberapa kendala jika Anda ingin membuat perubahan besar pada gambar SVG
2. Cara menggunakan SVG sebagai body { background-image: url(happy.svg); } 5 CSS
Ini mirip dengan menambahkan SVG ke dokumen HTML menggunakan tag <img>. Namun, sekarang kita akan melakukannya dengan CSS daripada menggunakan HTML seperti yang Anda lihat pada cuplikan kode di bawah ini
body { background-image: url(happy.svg); } _Saat Anda menggunakan SVG sebagai latar belakang CSS, metode ini memiliki kendala yang sama seperti <img>. Namun, itu masih memungkinkan untuk sedikit lebih banyak perubahan
Lihat demo di bawah ini dan jangan ragu untuk melakukan modifikasi menggunakan CSS
3. Cara menggunakan gambar SVG sebaris
Gambar SVG dapat ditulis langsung menggunakan tag ________1______8
Untuk melakukan ini, buka gambar SVG di VS Code atau IDE yang Anda inginkan, salin ke elemen body { background-image: url(happy.svg); } 9 di dokumen HTML Anda
<body> // Tempelkan kode SVG di sini. </body> _Jika semuanya benar, halaman web Anda akan terlihat persis seperti demo di bawah ini
Saat Anda menggunakan inline SVG dalam dokumen HTML, waktu pemuatannya akan berkurang karena berfungsi sebagai permintaan HTTP
Menggunakan metode ini memungkinkan Anda membuat lebih banyak perubahan daripada menggunakan metode <img> atau body { background-image: url(happy.svg); } 5
4. Cara menggunakan SVG sebagai <body> // Tempelkan kode SVG di sini. </body> _2
Anda juga dapat menggunakan elemen HTML <body> // Tempelkan kode SVG di sini. </body> _2 untuk menambahkan halaman web menggunakan kode di bawah ini
<object data="happy.svg" width="300" height="300"> </object>Anda menggunakan atribut <body> // Tempelkan kode SVG di sini. </body> _4 untuk menyetel URL sumber daya yang Anda gunakan pada objek, dalam hal ini gambar SVG
Anda menggunakan body { background-image: url(happy.svg); } _0 dan body { background-image: url(happy.svg); } 1 untuk mengatur lebar dan tinggi gambar SVG
Sekali lagi, di bawah ini adalah demo untuk Anda coba. 😃
<body> // Tempelkan kode SVG di sini. </body> _2 didukung oleh semua browser yang mendukung SVG
5. Menggunakan SVG sebagai <body> // Tempelkan kode SVG di sini. </body> 8
Meskipun tidak disarankan, Anda juga dapat 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 cukup sulit dipertahankan dan akan memperburuk Search Engine Optimization (SEO) situs Anda
Menggunakan <body> // Tempelkan kode SVG di sini. </body> _8 juga mengalahkan tujuan Scalable dalam nama Scalable Vector Graphics karena gambar SVG yang ditambahkan menggunakan format ini tidak dapat "diubah ukurannya"
6. Cara menggunakan SVG sebagai
Elemen HTML <object data="happy.svg" width="300" height="300"> </object> _2 adalah cara lain untuk menggunakan gambar SVG dalam HTML dan CSS menggunakan kode ini. <object data="happy.svg" width="300" height="300"> </object> 3
Ingat, metode ini juga memiliki keterbatasan. Menurut MDN, sebagian besar browser modern tidak setuju dan menarik dukungan mereka untuk plug-in browser. Artinya, menggunakan <object data="happy.svg" width="300" height="300"> </object> _2 bukanlah pilihan bijak jika Anda ingin situs Anda dapat beroperasi di browser pengguna pada umumnya
Di bawah ini adalah demo menggunakan elemen <object data="happy.svg" width="300" height="300"> </object> _2 untuk menambahkan gambar SVG
Kesimpulan
Saya harap Anda dapat mempelajari berbagai cara menggunakan gambar SVG di CSS dan HTML. Semoga tutorial ini dapat memandu Anda untuk dapat memilih metode yang tepat saat menambahkan gambar SVG ke situs web
Jika Anda memiliki pertanyaan, Anda dapat mengirimi saya pesan di Twitter, dan saya akan dengan senang hati menjawab semuanya
IKLAN
IKLAN
IKLAN
IKLAN
Saya seorang pengembang perangkat lunak yang sangat menyukai penulisan teknis, berkontribusi pada organisasi sumber terbuka, dan membangun komunitas pengembang Baca lebih banyak posting
Jika Anda membaca sejauh ini, tweet ke penulis untuk menunjukkan bahwa Anda peduli. Tweet terima kasih
Belajar kode secara gratis. Kurikulum open source freeCodeCamp telah membantu lebih dari 40.000 orang mendapatkan pekerjaan sebagai pengembang. Memulai