Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. SVG

Cara Hand Code di SVG

by
Difficulty:IntermediateLength:LongLanguages:

Indonesian (Bahasa Indonesia) translation by Ridho Anbia Habibullah (you can also view the original English article)

Final product image
What You'll Be Creating

Salah satu hal hebat tentang grafis vektor terukur (selain dari segi skalabel yang tak terukur tanpa kehilangan kualitas) adalah begitu kamu mengetahui dasar-dasar kamu dapat membuat kode sederhana dengan mudah, tanpa perlu membuka aplikasi grafis.

Dengan hanya beberapa baris kode kamu dapat memiliki ikon kustom milikmu sendiri, dan kamu akan tahu persis bagaimana masing-masing disatukan. Bila kamu membuat SVG sendiri, pastikan kamu ditulis dengan cara yang paling efisien, dan kamu memiliki tingkat kontrol maksimal saat menggunakannya di situsmu.

Dalam tutorial ini kita akan membahas semua dasar-dasar pengkodean SVG dengan tangan, tapi aku tidak akan membuat kamu bosan dengan ceramah kering yang hanya menguraikan bentuk dan atribut yang relevan. Sebagai gantinya kamu akan belajar cara menulis kode SVG melalui latihan, menciptakan enam ikon yang dapat kamu lihat di awal tutorial ini (lihat demo secara online). Dalam prosesnya, kamu akan menggunakan semua elemen dasar yang diperlukan untuk pengkodean hand SVG.

Berbicara tentang elemen-elemen dasar itu, mari kita cepat-cepat mengakaji tentang apa saja mereka.

Elemen SVG Dasar

kamu bisa mendapatkan banyak kompleksitas dengan SVG, tapi itu tidak perlu untuk ikon yang akan kita buat. Daftar berikut mencakup blok bangunan yang kita butuhkan.

  • <svg>Membungkus dan mendefinisikan seluruh grafik. <svg> adalah scalable vektor grafis apa <html> elemen adalah untuk halaman web.
  • <line> Membuat satu garis lurus.
  • <polyline> Membuat multi-segment baris.
  • <rect> Membuat persegi panjang dan kuadrat.
  • <ellipse> Membuat lingkaran dan oval.
  • <polygon> Membuat bentuk sisi lurus, dengan tiga sisi atau lebih.
  • <path> Membuat bentuk apapun yang kamu suka dengan mendefinisikan poin dan garis antara mereka.
  • <defs> Mendefinisikan aset-aset yang dapat digunakan kembali. Tidak ada yang ditempatkan di dalam bagian <defs> ini terlihat pada awalnya. <defs> adalah scalable vektor grafis apa <head> elemen adalah untuk halaman web.
  • <g> Membungkus beberapa bentuk menjadi kelompok. Tempat kelompok dalam <defs> bagian untuk memungkinkan mereka untuk digunakan kembali.
  • <symbol> Seperti sebuah grup, namun dengan beberapa fitur tambahan. Biasanya ditempatkan di bagian <defs>.
  • <use> Membawa aset yang didefinisikan dalam <defs> bagian dan membuat mereka terlihat di SVG

Saat kami melewati dan membuat ikon kami, kami akan mengerjakan daftar elemen ini sesuai urutan yang terlihat di atas.

Berkas Pemula

Sebelum memulai, ambil salinan file starter dari repo GitHub. Kamu bisa mendownload file zip, atau mengkloning repo ke sistem kamu sendiri.

dan CSS sudah ada. Ini akan memberi beberapa gaya pada SVG yang akan kita buat, dan juga akan mengatur kamu dengan grid kecil di halaman. Kami akan membuat ikon kami di atas grid ini, dan mudah-mudahan ini akan membantu kamu memvisualisasikan koordinat tempat kamu bekerja saat meletakkan SVGmu.

Saat kamu membuka "handcodedsvg.html" dari folder "Starter Files" sumber kamu akan melihat yang berikut ini:

Quick Primer di Nilai x dan y 

Saat bekerja di ruang 2D di situs web, sumbu horizontal ditunjukkan oleh x dan sumbu vertikal ditunjukkan oleh y. Posisi di sepanjang masing-masing sumbu ini ditunjukkan oleh angka. Jika kita ingin memindahkan sesuatu ke kanan, kita perlu menggunakan nilai x yang meningkat, dan untuk berpindah ke kiri kita akan menggunakan penurunan nilai x. Demikian juga, untuk memindahkan sesuatu ke bawah, kita akan menggunakan nilai y yang meningkat, dan untuk memindahkan sesuatu, kita akan menggunakan nilai y yang menurun.

Sebuah singkatan umum untuk mengekspresikan nilai x dan y dari satu titik adalah (x, y). Sebagai contoh, sebuah titik pada 10 pada sumbu x dan 50 pada sumbu y dapat ditulis sebagai (10, 50). Aku akan menggunakan steno ini dari waktu ke waktu dalam tutorial ini.

Perhatikan dua garis paling gelap di grid kita? Kita akan menempatkan SVG kita sehingga pojok kiri atas sejajar dengan tempat mereka berpotongan. Dengan demikian, titik perpotongan tersebut akan mewakili posisi x = 0 dan y = 0, atau (0,0), pada SVG kita.

Latar Belakang Grid

Masing-masing garis grid paling terang mewakili 10px, dan garis ketebalan medium mewakili 100px. Jadi jika kita ingin memindahkan benda dari satu garis ketebalan medium ke dimensi berikutnya, kita akan meningkatkan lokasinya pada sumbu y sebesar satu 100 px.

Jika itu masih terdengar sedikit tidak jelas, jangan khawatir ini semua akan masuk akal saat kita masuk ke dalam kepraktisan membuat ikon SVG kita.

Default SVG Styling

Perhatikan bahwa di file HTML starter ada beberapa CSS yang disertakan dengan styling default untuk ikon SVG yang akan segera dibuat:

Ini akan membuat ikon kita tidak terisi, dan goresan hitam 5px lebar dengan penutup bulat dan bergabung.

1. Setup SVG

Langkah pertama dalam membuat SVG adalah meletakkan <svg></svg> elemen . Apa pun yang Anda inginkan agar SVG Anda tampilkan harus berada di antara tag ini. Ada beberapa atribut yang bisa Anda gunakan pada elemen ini, tapi kami akan menjaga agar tetap sederhana dan hanya menggunakan width dan height.

Tambahkan kode berikut di bagian body  dari dokumen HTML Anda:

Catatan: CSS pada file starter kita akan mengimbangi SVG ini dan ke kanan dengan 100px sehingga pojok kiri atas akan diposisikan di titik persimpangan dari dua garis paling gelap pada grid latar belakang kita. Dan nilai dalam demo CodePen sepanjang tutorial ini mungkin sedikit berbeda - tapi merasa bebas untuk bermain-main dengannya.

2. Membuat ikon “Left Align” 

Mari kita mulai dengan menggunakan elemen <line> untuk membuat ikon align kiri ini:

Elemen garis memiliki empat atribut yang harus kamu gunakan:

  • x1 titik awal horizontal dari garis
  • y1 titik awal vertikal dari garis
  • x2 titik akhir horizontal dari garis
  • y2 titik akhir vertikal dari garis

Untuk meringkas di atas, kamu menggunakan atribut x1 dan y1 untuk menentukan di mana garis dimulai, dan atribut x2 dan y2 untuk mengatur di mana garis berakhir.

Mari buat baris pertama ikon kita, yang ada di atas. kita akan membuat garis panjang 45px, namun goresan 5px yang kita gunakan akan menambahkan beberapa piksel tambahan di sekitar bagian luar garis kita. Dengan demikian, kita perlu mengimbangi garis dan turun ke kanan dengan 3px untuk memastikan tidak ada piksel tambahan yang dibuat oleh goresan yang terpotong.

Oleh karena itu, kita akan memulai jalur kita pada posisi 3 pada sumbu x dan 3 pada sumbu y. Kita dapat mengatur titik awal garis ini (3,3) dengan menggunakan atribut x1 = '3' y1 = '3'.

Kita ingin baris menjadi panjang 45px, jadi kita akan menambahkan 45 ke posisi awal kita x keposisi 3, memberi kita nilai 48 sebagai nilai yang ingin kita tetapkan untuk x2. kita ingin baris selesai pada posisi yang sama pada sumbu horizontal, jadi kita akan menetapkan y2 menjadi sama dengan 3, yaitu nilai yang sama dengan yang kita berikan pada y1. Kami akan menambahkan titik akhir baris (48,3) ini melalui atribut x2 = ''48 '' y2 ="3 ".

Kode lengkap untuk baris pertama akan terlihat seperti ini:

Periksa pratinjau browsermu dan kamu akan melihat garis hitam panjang 45px dengan penutup bulat yang bagus.

Sekarang kita bisa melanjutkan dan menambahkan tiga baris berikut ke ikon kita. Kita ingin berakhir dengan empat baris secara total. Yang pertama dan ketiga harus panjangnya 45px, dan yang kedua dan keempat harus panjang 62px. Kami juga menginginkan celah vertikal antara masing-masing 16px.

Kita dapat mencapainya dengan kode berikut:

Catatan: nilai y dari setiap baris meningkat secara bertahap sebesar 16px untuk menciptakan celah vertikal yang dibutuhkan.

Lihat lagi pratinjau browsermu, dan kamu harus melihat keempat baris tersebut. Kamu juga bisa mengedit SVG langsung di pena ini:

Komentari Ikon Milikmu Saat Kami Pergi

Dengan kode di tempat itu, ikon Kamua yang pertama sudah jadi. kita siap untuk beralih ke pembuatan ikon berikutnya, dan kami ingin membuatnya berada pada posisi yang sama di grid, namun saat ini ikon align yang kiri ada di jalannya. Dengan demikian, untuk saat ini hanya mengomentari kodenya untuk membersihkan ruang. Kita akan kembali dan memberi tanda komentar nanti saat kita mengubah ikon kita menjadi aset yang dapat digunakan kembali.

Kamu harus melakukan hal yang sama untuk setiap ikon saat kami pergi, mengomentarinya setelah kamu selesai membuatnya. Untuk alasan itu mungkin juga ide bagus untuk menambahkan sedikit catatan di atas kode untuk setiap ikon sehingga kamu tahu mana yang akan kamu kembalikan kepada mereka nanti.

3. Cara Membuat Ikon "Right Caret"

Untuk ikon ini, mari gunakan evolusi line elemen berikutnya: polyline . Kami akan menggunakannya untuk membuat right caret sebagai penunjuk.

Elemen <polyline>  hanya memiliki satu atribut: points. Di sini kamu menggunakan beberapa pasang angka untuk mengatur serangkaian poin. Garis secara otomatis akan ditarik di antara keduanya. Pasangan nomor hanya ditulis satu nomor setelah yang lain di dalam atribut poin. Pemisahan koma tidak diperlukan, meski bisa disertakan secara opsional. Untuk keterbacaan kamu mungkin juga ingin menempatkan masing-masing pasangan nilai pada barisnya sendiri dalam kodemu.

kita akan memulai polyline kanan kami di tempat yang sama dengan kami memulai ikon terakhir kami, bahwa menjadi (3,3) untuk memastikan goresan dan penutup kita tidak terpotong. Kita  ingin poin kedua kita beralih ke kanan, dan turun 25px, jadi kita akan mengaturnya ke (30,28). Poin ketiga kita harus sejajar vertikal dengan titik pertama, dan bergerak turun dengan 25 px lainnya, jadi akan diatur ke (3,53).

Kita dapat menambahkan poin-poin ini ke dalam atribut poin polyline kita seperti:

Jika kamu menginginkan kode yang lebih ringkas, Kamu juga bisa menulis di atas sebagai:

atau

Lihatlah pratinjau browsermu dan kamu harus melihat ikon tanda sisipan yang tepat: ikon lain selesai, seperti itu!

Sekali lagi, komentari ikon ini dan berikan sedikit catatan sehingga kamu tahu yang mana sebelum pindah ke ikon berikutnya.

4. Membuat Ikon "Browser"

Sekarang kita memiliki garis miring, mari kita membuat beberapa bentuk, dimulai dengan persegi panjang (<rect>). kita akan menggunakannya bersamaan dengan beberapa pasang <line> untuk membuat ikon browser.

Rectangles dan kuadrat dapat dibuat dengan elemen <rect> , yang memiliki empat atribut yang harus kamu berikan:

  • x posisi pojok kiri atas pada sumbu x
  • y posisi pojok kiri atas pada sumbu y
  • width lebar bentuknya
  • height tinggi bentuknya

Catatan: Anda juga dapat menggunakan atribut rx dan ry untuk membuat sudut membulat jika Anda mau.

Kita akan membuat persegi panjang dengan sudut kiri atas diimbangi 3px di kedua arah, sekali lagi untuk menghindari kliping stroke, jadi kita akan menggunakan atribut x = "3" y = "3". Kita menginginkan lebar 80px dengan tinggi 60px, jadi kita juga akan menggunakan atribut width = "80" height = "60".

Kode full rectangle kita seharusnya terlihat:

Simpan kode kamu dan lihat pratinjau browsermu. Kamu seharusnya melihat sebuah kotak kecil rapi yang terpampang di sana.

Sekarang yang perlu kita lakukan hanyalah menambahkan garis horizontal di bagian atas, dan garis vertikal di dekat kiri atas, seperti yang kamu lihat pada gambar di awal bagian ini. Kita akan menggunakan proses pembuatan baris yang sama seperti sebelumnya, dan kode ikon browser lengkap kita akan terlihat seperti ini:

Luangkan waktu sejenak untuk melihat koordinat yang ada di atribut dua baris, dan mungkin mengubah nilainya sedikit sehingga kamu dapat melihat bagaimana mereka bekerja di ikon ini.

5. membuat Ikon "Alert"

Sekarang kita memiliki empat persegi panjang buatan di bawah kontrol, mari kita mencoba menggunakan <ellipse> s. Kami akan menggunakan dua di antaranya, bersama dengan  <line>, untuk membuat ikon lansiran ini:

Seperti persegi panjang, elemen <ellipse>  juga membutuhkan empat atribut, namun keduanya sedikit berbeda dengan persegi panjang. Alih-alih menggunakan lebar dan tinggi kita menetapkan radius horizontal dan vertikal. Dan alih-alih memposisikan pojok kiri atas bentuk, kita memposisikan pusatnya:

  • cx posisi tengah pada sumbu x. Pikirkan "cx untuk pusat x".
  • cy posisi tengah pada sumbu y. Pikirkan "cy untuk pusat y".
  • rx ukuran jari-jari pada sumbu x, yaitu tinggi bentuk terbagi dua. Pikirkan "rx untuk radius x"
  • ry ukuran jari-jari pada sumbu y, yaitu lebar bentuk terbagi dua. pikirkan "ry untuk radius y".

Kita menginginkan lingkaran bulat sempurna yang lebar 80px dengan tinggi 80px, yang berarti kita membutuhkan radiusnya menjadi 40px pada kedua sumbu. Kita akan mengatur ini dengan atribut rx="40" ry="40".

Kami juga ingin lingkaran duduk dengan garis paling gelap pada grafik kami. Mengingat bahwa lingkaran kita akan berukuran 80px lebar dan tinggi, itu akan menempatkan titik tengahnya pada 40px. Kita juga perlu mengijinkan offset 3px kita untuk menghindari kliping, jadi itu berarti titik pusat lingkaran kita harus berupa 43px pada kedua sumbu. Kita akan mengatur ini dengan atribut cx="43" cy="43".

Menempatkan semua itu bersama-sama, kita mendapatkan kode ini:

Periksa pratinjau browsermu dan sekarang kamu akan melihat lingkaran di halaman milikmu.

Kita akan menambahkan lingkaran kedua sekarang, untuk membuat titik di bagian bawah tanda seru. kita akan membuat ini dengan cara yang sama, satu-satunya perbedaan adalah kita akan menggunakan gaya sebaris untuk mengatur isi menjadi hitam:

Akhirnya, kita hanya perlu menambahkan garis untuk membuat bagian tanda seru lainnya. Sekali lagi kita menggunakan teknik yang sama seperti dengan baris lain yang telah kita gunakan sejauh ini, dengan satu-satunya perbedaan adalah kita akan menggunakan gaya inline untuk menebalkan lebar stroke ini dari 5px menjadi 8px.

Kode lengkap untuk ikon lansiran kita adalah sebagai berikut:

6. Membuat Ikon "Play"

Sekarang kita bisa memahamkan bentuk persegi panjang dan elips yang relatif tetap, kita siap untuk menggulung bentuk kita sendiri dengan menggunakan elemen <polygon> . Kita dapat menciptakan bentuk multi sisi yang kita inginkan dengan ini, mulai dari oktook hingga bintang. Namun kita akan menjaga hal-hal lurus ke depan untuk saat ini dan menciptakan sebuah segitiga. Kita akan menggabungkannya dengan <ellipse>  untuk membuat ikon putar:

Elemen <polygon>  hampir sama dengan elemen  <polyline>. Ini juga hanya memiliki satu atribut, points, di mana kamu menggunakan sepasang nilai untuk mengatur setiap titik yang membentuk bentuknya. Perbedaannya adalah bahwa sementara polyline akan tetap terbuka, poligon secara otomatis akan menutup dirinya sendiri.

Mari kita mulai dengan menurunkan lingkaran bahwa poligon kita akan berada di dalam. Kita akan menggunakan elips yang sama persis dengan yang kita lakukan di ikon lansiran milik kita:

Sekarang mari kita buat poligon kita. Kita akan menempatkan tiga titik, dan garis secara otomatis akan dihasilkan di antara titik-titik ini untuk menciptakan segitiga. Poinnya adalah (35,23), (60,43) dan (35,63). Dengan demikian kode poligon kita akan menjadi:

Dan kode ikon putar lengkap kita adalah:

7. Membuat Ikon "Download"

Sekarang kita akan beralih ke alat yang paling berpotensi kompleks, tapi sekaligus paling fleksibel untuk menghasilkan bentuk SVG, dan itu adalah elemen <path> . Membuat jalan sedikit seperti menciptakan poligon, di mana kamu meletakkan bentukannya sepotong demi sepotong. Namun dengan jalan kamu langsung membuat setiap titik dan garis sendiri tanpa otomasi, dan kamu juga memiliki pilihan untuk membuat kurva antara titik bukan garis lurus.

Sebuah jalan dapat digunakan untuk menciptakan apa saja, namun di luar tingkat kompleksitas tertentu kamu masih lebih baik menggunakan aplikasi desain vektor daripada coding tangan. Oleh karena itu, kami akan berfokus pada sebagian kecil fungsionalitas jalur, dan menggunakannya untuk membuat ikon unduhan ini:

Secara teknis, kamu bisa menciptakan bentuk di atas dengan poligon, tapi panah ini akan memberi kita cara yang baik untuk memahami bagaimana elemen jalan bekerja.

Kami hanya menggunakan satu atribut , dan itu adalah d. D adalah singkatan dari 'data', dan di sini kamu akan menentukan semua titik dan garis jalan kamu. Dalam atribut ini, perintah untuk mengatur titik jalur dan membuat garis di antara keduanya disediakan melalui huruf tunggal seperti M atau L, diikuti oleh satu set koordinat x dan / atau y.

Ada beberapa perintah ini, tapi memberi kamu intro untuk bekerja dengan kita akan berpegang pada beberapa yang dapat digunakan secara realistis saat melakukan coding. Mereka adalah sebagai berikut:

  • M Merupakan moveto. Ini memulai sebuah jalur baru pada posisi tertentu, yang didefinisikan dengan nilai x dan y. Bayangkan ini seperti mengarahkan kursor mouse ke atas kanvas kamu, siap untuk menggambar. Ibu kota M menunjukkan pindah ke satu set koordinat yang absolut. (Huruf kecil m akan menunjukkan koordinat relatif)
  • L Merupakan bagian dari lineto. Buat garis dari posisi saat ini ke posisi baru. Modal L menunjukkan pindah ke satu set koordinat mutlak. (Huruf kecil l akan menunjukkan koordinat relatif).
  • Z Merupakan closepath. Ini mengubah jalan menjadi bentuk tertutup dengan menggambar garis lurus antara titik saat ini ke titik pertama yang dibuat di jalan.

Kamu pasti harus melihat ketiga perintah ini, (dan ikon yang akan kita buat dengannya), sebagai primer pendahuluan dari elemen . Untuk benar-benar mendapatkan hasil maksimal dari itu, kamu pasti ingin membiasakan diri dengan semua perintah yang kamu inginkan.

Kode Ikon Unduhan Milikmu

Untuk mengode jalur ikon unduhan, sebaiknya tambahkan dulu di elemen jalur kosong:

Dari sini, tambahkan setiap perintah satu per satu, simpan dan lihat kemajuan bentuknya sehingga kamu bisa melihat bagaimana pembuatannya. Aku juga merekomendasikan untuk menempatkan setiap perintah pada barisnya sendiri agar mudah dibaca.

  1. Pertama, kita ingin pindah ke (18,3), titik di mana kita ingin anak panah kita mulai. Untuk melakukan ini, kita akan menambahkan perintah M 18 3 ke atribut d path kita.
  2. Selanjutnya kita ingin menggunakan perintah L untuk membuat garis yang menarik dari titik awal jalan kita sepanjang sumbu x untuk 28px. Untuk melakukan itu mari kita tambahkan perintah kedua kita: L 46 3. Periksa pratinjaumu dan kamu harus melihat garis horizontal kecil.
  3. Sekarang mari kita menggambar garis lurus ke bawah untuk 37px dengan menambahkan L 46 40.
  4. Kemudian lurus ke kanan dengan 15px dengan L 61 40
  5. Selanjutnya kita harus mulai membuat titik panah. Kita perlu menggambar garis diagonal ke bawah dan ke kiri. Kita akan melakukan ini dengan L 32 68.
  6. Dan kemudian kita akan memiliki garis belakang diagonal kembali dan ke kiri dengan L 3 40.
  7. Sekarang kita akan menyelesaikan kepala panah kita dengan menggambar sedikit jalan ke kanan lagi dengan L 18 40.
  8. Untuk menutup bentuk kita, kita tidak perlu menentukan titik untuk menggambar garis. Yang perlu kita lakukan adalah menambahkan perintah Z, yang secara otomatis akan menutup bentuk kita untuk kita.

Kode jalur panah akhir Milikmu akan terlihat seperti ini:

Untuk info lebih lanjut tentang bekerja dengan <path> lihat referensi di bagian bawah halaman.

8. Tambahkan  Elemen <defs>

Kita menyeselesaikan pengkodean enam ikon milik kita, jadi sekarang kita  bisa menyiapkannya untuk penempatan dan penggunaan kembali SVG kami.

Untuk melakukan ini, kita akan membungkus kode untuk semua enam komentar kami, (saat ini dikomentari), ikon dengan tag :

Untuk melakukan ini, kita akan membungkus kode untuk semua enam komentar kami, (saat ini dikomentari), ikon dengan tag :

Kamu sekarang dapat menghapus tanda komentar setiap ikonmu dan mereka tidak akan terlihat di halaman.

9. Membuat Grup dengan <g>

Ada dua cara untuk membuat ikon kita siap digunakan: dengan mengubahnya menjadi kelompok, atau menjadi simbol. Kita akan mengubah setengah bagian pertama ikon menjadi beberapa kelompok, dan babak kedua menjadi simbol sehingga kita bisa menggambarkan perbedaannya.

Untuk mengubah salah satu ikon kita menjadi satu kelompok yang harus kita lakukan adalah membungkusnya dengan <g></g> tag . Untuk membuat grup itu bisa digunakan kita juga perlu memberikan ID yang unik.

Sebagai contoh:

Bungkus masing-masing tiga ikon pertamamu dengan tag dan tambahkan ID unik, seperti:

10.Tempatkan Grup dengan <use>

Kita sekarang memiliki tiga ikon yang didefinisikan sebagai kelompok di elemen <defs>  kita, jadi kita siap menggunakannya di SVG kita. Untuk mencapai hal ini, yang perlu kita lakukan adalah menambahkan elemen <use> , (pastikan untuk menambahkannya setelah dan di luar elemen <defs>), dan tetapkan atribut href untuk menargetkan ID ikon yang diinginkan.

Misalnya, untuk menggunakan ikon alis kiri tambahkan kode ini:

Untuk memposisikan ikon di lokasi tertentu tambahkan atribut x dan y:

Kode untuk menambahkan ketiga ikon dan membedakannya akan terlihat seperti ini:

Periksalah perambanmu dan kamu akan melihat ketiga ikon pertama Kamu:

11. Membuat Simbol dengan <symbol>

Alih-alih menggunakan grup untuk menentukan ikonmu, kamu juga dapat menggunakan simbol. Simbol hampir sama dengan kelompok, namun kamu bisa mengakses setting tambahan untuk mengontrol viewbox dan aspect ratio.

Ini bisa sangat berguna jika kamu ingin melakukan hal-hal seperti memusatkan ikon yang telah kita buat sejauh ini. Kita akan mengubah tiga ikon yang tersisa menjadi simbol, kemudian menyesuaikannya sehingga secara vertikal akan mengisi ruang dengan tinggi 100 piksel, dan secara horizontal berpusat di ruangan itu.

Kita membuat simbol dengan cara yang sama seperti grup milik kita , hanya kita akan membungkus masing-masing dari tiga kode ikon terakhir kita di <symbol></symbol> tag . Kita juga perlu menambahkan ID unik untuk masing-masing.

Namun apa yang akan kita tambahkan juga adalah atribut viewBox. Ini akan membiarkan kita mendefinisikan apa yang terlihat dari setiap simbol seharusnya. Bila browser memiliki akses ke informasi ini, maka browser dapat menskalakan dan menyelaraskan simbol dengan benar.

Kita harus memberi atribut viewBox empat nilai. Dua yang pertama akan menentukan titik kiri atas ikon kita, dan yang ketiga dan keempat menentukan lebar dan tinggi masing-masing.

Dimulai dengan ikon "alert" kita, lebar dan tinggi keduanya 86px jadi kita akan mengatur viewBox menjadi 0 0 86 86 seperti:

Ikon "play" juga berukuran lebar dan tinggi 86px, dan ikon 'unduh' berukuran 64px dengan tinggi 71px. Kode yang sesuai untuk simbol kita seharusnya:

12. Tempatkan Syimbol dengan <use>

Kita sekarang dapat menggunakan ikon simbol kita dengan cara yang sama seperti yang kita lakukan pada kelompok kita. Namun kami juga akan memberikan atribut lebar dan tinggi set ke 100:

Kamu akan melihat bahwa masing-masing ikon berbasis simbol kamu dengan rapi mengisi dan menyelaraskan di ruang 100px hingga 100px:

Cobalah menerapkan atribut width dan heigth ke elemen <use>  dari salah satu ikon berbasis grup kamu. Kamu akan melihat bahwa tidak ada yang berubah. Ini karena browser bergantung pada nilai viewBox, (yang tidak dimiliki grup), untuk mengetahui bagaimana skala ikonnya.

Membungkus

Berikut adalah cara kode yang harus kamu selesaikan:

Itu mencakup esensi dari SVG tangan coding! Mari rekap dan rangkum apa yang kita pelajari: 

  • Susunan elemen <svg> milikmu untuk membungkus keseluruhan grafis
  • Gunakan <line> dan <polyline> untuk membuat garis.
  • Gunakan <rect>, <ellipse> and <polygon> untuk membuat bentuk penutup. 
  • Gunakan <path> untuk membuat apapun yang kamu inginkan.
  • Bentuk grup dengan elemen <g>
  • Untuk yang sejenis seperti kelompok dengan fitur tambahan, gunakan <symbol>.
  • Guankan elemen <defs> untuk menentukan simbol dan kelompok yang dapat digunakan kembali.
  • Tempatkan simbol dan grup yang dapat digunakan kembali dengan elemen <use> .

Kita belajar beberapa dasar yang kuat dalam tutorial ini, tapi masih banyak lagi yang bisa kamu lakukan dengan SVG jadi jangan berhenti di sini, terus menggali dan menemukan lebih banyak hal mengagumkan yang bisa dicapai!

Sementara itu, semoga kamu tidak lagi merasa sepenuhnya bergantung pada aplikasi desain vektor untuk pembuatan SVG mu, dan kamu yakin bisa menghasilkan beberapa grafis kamu sendiri dengan tangan. Untuk grafis yang lebih kompleks, apl desain masih merupakan cara untuk pergi, tapi ada banyak hal yang dapat kamu lakukan dengan blok bangunan yang kamu miliki, memanfaatkan kecepatan dan pengendalian pengarsipan tangan.

Tautan yang berhubungan:

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.