Panduan Praktis Untuk SVG Dan Alat Desain

Pemahaman yang baik tentang SVG adalah keterampilan yang langka. Anehnya sering, SVG diperlakukan hanya sebagai format gambar lain. Kami menggunakan SVG karena skalabilitasnya dan ukuran file yang lebih kecil, tetapi pada kenyataannya, SVG jauh lebih banyak!

Dalam artikel ini, saya akan menjelaskan tiga alat desain paling populer: Adobe Illustrator, Sketch, dan Figma. Ada juga alat lain yang tersedia yang mendukung SVG yang mungkin memiliki fungsi lain dan mengimplementasikan solusi lain.

Catatan : Jika tidak dinyatakan lain, isi artikel ini mengacu pada SVG 1.1 2nd Edition. Beberapa poin yang dibahas di bawah ini tidak berlaku untuk SVG 2, namun masih belum mencapai status rekomendasi, meninggalkan SVG 1.1 sebagai spesifikasi paling mutakhir.

Mengapa Repot Tentang Alat Desain?

SVG adalah bahasa markup berbasis XML dan, seperti bahasa pemrograman lainnya, dapat ditulis dan diedit dalam editor teks. Jadi secara teoritis, berbeda dengan file JPG atau PNG, kami tidak memerlukan perangkat lunak GUI untuk membuat SVG. Namun, dalam sebagian besar kasus, menggunakan aplikasi desain grafis tidak dapat dihindari.

Bekerja dengan bentuk dan grafik yang rumit dalam format berbasis teks sangat mungkin dilakukan, tetapi biasanya akan sangat rumit dan membosankan. Oleh karena itu, merupakan praktik umum untuk menggunakan aplikasi seperti Adobe Illustrator, Sketch atau Figma untuk mendesain grafis secara visual, dan kemudian mengekspornya ke format SVG.

Jadi, tidak peduli apakah Anda seorang desainer yang membuat kode atau pengembang yang sadar desain, kemahiran yang baik dalam bekerja dengan SVG membutuhkan sedikit pengetahuan dari kedua sisi: alat desain dan bahasa SVG itu sendiri. Untuk lebih memahami hubungan antara keduanya, mari kita lihat lebih dekat apa yang ditawarkan aplikasi desain grafis dan bagaimana fitur mereka diterjemahkan ke SVG.

Bentuk Dasar

Banyak grafik vektor dibangun dari beberapa bentuk dasar — ​​dikelompokkan, diubah, dan digabungkan satu sama lain. Tabel di bawah menunjukkan alat bentuk apa yang tersedia di Illustrator, Sketch, dan Figma dan sebagai elemen SVG apa alat tersebut diekspor.

Elips Dan Lingkaran

Salah satu bentuk dasar di setiap alat desain adalah elips. Dalam SVG, kita akan menemukan elemen <ellipse /> yang cocok, yang ditentukan oleh koordinat pusat elips ( cx dan cy ) dan dua jari-jari ( rx dan ry ).

Seperti inilah bentuk elips di SVG:

 <ellipse cx="400" cy="300" rx="250" ry="150"/>

Jenis elips yang sangat istimewa adalah lingkaran. Lingkaran adalah elips dengan jari-jari rx dan ry sama besar. SVG memiliki elemen <circle /> sendiri yang mengambil satu atribut lebih sedikit karena hanya ada satu radius yang harus diperhitungkan:

 <circle cx="400" cy="300" r="250"/>

Dalam kasus elips dan lingkaran, semua alat desain bekerja sama: Alat Ellipse di Illustrator, alat Oval di Sketch dan alat Ellipse di Figma semuanya akan menghasilkan elemen <ellipse /> kecuali jari-jarinya sama: dalam kasus seperti itu kita akan berakhir dengan elemen <circle /> .

Persegi Panjang Dan Persegi Panjang Bulat

Bentuk dasar lain yang umum untuk semua alat desain adalah persegi panjang. Dalam kasus semua alat desain, menggunakan alat persegi panjang menghasilkan elemen <rect /> di SVG. <rect /> dasar didefinisikan oleh 4 atribut: koordinat x dan y , bersama dengan lebar dan tingginya:

 <rect x="150" y="100" width="500" height="400"/>

Perhatikan bahwa sementara posisi <ellipse /> dan <circle /> ditentukan oleh pusat geometrisnya, posisi <rect /> ditentukan oleh koordinat sudut kiri atas.

Selain persegi panjang dasar, kita sering menggunakan persegi panjang dengan sudut membulat. Di ketiga alat desain, Anda dapat mengubah persegi panjang menjadi persegi panjang bulat dengan menerapkan radius batas di panel Inspector atau Properties .

Selain itu, di Sketch dan Illustrator, ada alat yang didedikasikan untuk membuat persegi panjang bulat ( Rounded Rectangle Tool di Illustrator dan Rounded tool di Sketch). Namun, tidak ada perbedaan antara persegi panjang biasa dengan radius yang diterapkan dan persegi panjang bulat yang digambar dengan alat Persegi Panjang Bulat .

Oleh karena itu, tidak peduli bagaimana dibuat, persegi panjang bulat akan diekspor menggunakan sintaks berikut:

 <rect x="150" y="100" width="500" height="400" rx="30"/>

Dalam hal ini, rx adalah atribut yang bertanggung jawab untuk jari-jari sudut yang dibulatkan:

Persegi Panjang Bulat Dengan Sudut Elips

Satu perbedaan signifikan antara alat desain dan SVG adalah bagaimana jari-jari didefinisikan. Dalam semua alat desain yang kami pertimbangkan, radius batas ditentukan oleh satu variabel. Kita dapat menganggap radius batas sebagai lingkaran kecil yang digunakan untuk menutupi sudut persegi panjang kita:

Sementara itu, pada SVG border radii dapat didefinisikan dengan dua atribut: rx (seperti pada contoh di atas) dan ry . Mereka memungkinkan kita untuk membuat persegi panjang dengan sudut elips. Anda dapat menganggap sudut membulat seperti elips yang digunakan sebagai topeng, bukan lingkaran:

 <rect x="150" y="100" width="500" height="400" rx="40" ry="30"/>

Jadi, dalam hal ini, SVG menawarkan Anda lebih banyak kemungkinan daripada alat desain.

Catatan : Meskipun tidak sepenuhnya terkait dengan topik artikel ini, perlu diperhatikan bahwa perbedaan yang dijelaskan di atas berlaku untuk SVG dan HTML/CSS. border-radius properti CSS yang digunakan untuk menata node seperti div dan bentang juga memungkinkan pembuatan sudut elips. Anda dapat melihat contoh di bawah ini.

 border-radius: 10px 5% / 20px 25em 30px 35em;

Nilai sebelum garis miring ( / ) adalah jari-jari horizontal (setara dengan rx ) dan nilai setelah garis miring adalah nilai vertikal (setara dengan ry ).

Persegi Panjang Bulat Dengan Beberapa Jari-jari

Dalam alat desain, sama seperti di CSS, setiap sudut persegi panjang dapat dikontrol secara terpisah. Dengan kata lain, setiap sudut dapat memiliki radiusnya sendiri (atau tidak memiliki radius sama sekali). Operasi seperti itu tidak dimungkinkan pada elemen <rect /> di SVG. Setiap elemen <rect /> hanya memiliki satu atribut rx dan satu ry . Jika Anda membuat persegi panjang dengan beberapa jari-jari diterapkan ke sudutnya, alat desain akan menghasilkan elemen <path /> alih-alih elemen <rect /> . Kita akan berbicara lebih banyak tentang elemen <path /> di bagian selanjutnya.

Sudut Halus

Salah satu fitur menarik yang diperkenalkan oleh Sketch dan Figma belum lama ini adalah sudut-sudut yang mulus. Singkatnya, sudut yang halus menggunakan radius batas yang tidak beraturan untuk mendapatkan hasil yang terlihat lebih alami dan, yah, halus. Aplikasi sudut halus yang paling umum adalah ikon aplikasi dan elemen bulat lainnya di iOS. Apple menggunakan sudut membulat "biasa" pada platform selulernya hingga iOS6 dan kemudian beralih ke apa yang kita sebut sekarang sudut "halus" sebagai bagian dari desain ulang besar yang diperkenalkan pada 2013 (iOS7).

Di Sketch, Anda dapat mencapai efek sudut halus dengan beralih antara Sudut Bulat dan Sudut Halus di Inspector . Figma memberi Anda lebih banyak kontrol atas sudut Anda karena Anda dapat memanipulasi dengan tingkat kehalusan di menu Penghalusan Sudut .

Sayangnya, semua ini tidak dapat dengan mudah diterjemahkan ke SVG karena SVG tidak mengetahui konsep sudut mulus sama sekali. Ada juga perbedaan penting antara apa yang dilakukan Sketch dan Figma jika Anda mencoba mengekspor persegi panjang dengan sudut halus ke SVG.

Figma mengabaikan sudut halus, dan mengekspor persegi panjang sebagai elemen <rect /> biasa dengan sudut membulat. Sketsa, di sisi lain, mengekspor persegi panjang dengan sudut halus sebagai <path /> yang mencoba mereplikasi bentuk sebenarnya dari sudut halus. Jadi Figma memberi kita akurasi yang lebih buruk demi menjaga persegi panjang tetap persegi panjang, sementara Sketch membidik akurasi maksimum yang mungkin dengan mengorbankan semantik dan ukuran file yang lebih besar. Jika Anda ingin lebih memahami apa arti perbedaan ini, kami akan menggali lebih dalam pro dan kontra dari mempertahankan bentuk dasar nanti.

Garis

Jenis elemen dasar berikutnya adalah garis. Dalam hal ini, kami mengacu pada garis sebagai satu garis lurus yang bergerak dari titik A ke titik B. Illustrator, Sketch dan Figma semuanya menawarkan alat garis mereka sendiri yang didedikasikan untuk menggambar garis. Di SVG, kami memiliki elemen <line /> . Empat atributnya diperlukan: koordinat titik awalnya dan koordinat titik akhirnya:

 <line x1="100" y1="100" x2="200" y2="200"/>

Dalam hal mengekspor, Illustrator dan Figma akan mengekspor garis sebagai elemen <line /> jika memungkinkan, sementara Sketch akan selalu menghitung garis ke elemen <path /> .

garis poli

Sekarang mari kita lihat polylines. Polyline adalah rangkaian garis lurus yang terhubung. Polylines tidak memiliki alat khusus dalam alat desain. Mereka dapat digambar dengan alat Pen (dalam Illustrator dan Figma) atau dengan alat Vektor (dalam Sketsa).

Dalam SVG, polyline didefinisikan dengan elemen <polyline /> . <polyline /> digambar menggunakan atribut points yang merupakan daftar koordinat yang mendefinisikan semua titik yang membuat polyline. Mari kita lihat contoh polyline yang terbuat dari tiga segmen dan empat titik:

 <polyline points="10,20 10,20 30,10 40,20" />

Illustrator dan Sketch menerjemahkan polyline ke elemen <polyline/> , sementara Figma mengekspor polyline sebagai <path /> s.

panah

Di ketiga alat tersebut, Anda dapat mengontrol ujung garis untuk mengubahnya menjadi panah dan semacamnya. Dan ketiga alat tersebut akan mengekspor baris seperti <path /> s, bahkan jika tanpa topi diterapkan bentuk yang sama akan diterjemahkan ke <line /> s atau <polyline /> s. Apakah karena SVG tidak mendukung panah? Tidak tepat.

Sebenarnya, spesifikasi SVG memang menyertakan ujung garis yang dapat disesuaikan yang dikenal sebagai penanda. Namun, tidak ada alat desain yang kami sebutkan menggunakan penanda di SVG yang mereka hasilkan.

<marker> adalah elemen SVG terpisah yang dapat didefinisikan dalam <defs> SVG dan kemudian digunakan pada elemen <line> , <polyline> dan <path> dengan atribut marker: marker , marker-start , marker-mid dan marker-end . Jika Anda ingin mempelajari lebih lanjut tentang atribut ini, saya sarankan Anda untuk melihat dokumentasi resmi W3C.

Poligon Dan Bintang

Bentuk dasar terakhir yang akan kita lihat adalah poligon. Poligon adalah bentuk tertutup yang terbuat dari garis lurus, misalnya bintang atau segi enam. Anda juga dapat menganggapnya sebagai polyline tertutup. Sintaks elemen <polygon /> di SVG sebenarnya sama dengan <polyline /> . Satu-satunya perbedaan antara keduanya adalah bahwa dalam <polygon /> titik terakhir pada daftar selalu dihubungkan dengan titik pertama untuk membuat <polygon /> bentuk tertutup.

Beberapa poligon adalah poligon beraturan. Keistimewaan poligon beraturan adalah semua sisi dan sudutnya sama besar. Untuk menggambar poligon biasa, seperti segi enam atau segi lima, Anda dapat menggunakan alat Poligon , sama di Illustrator, Sketch dan Figma. Alat poligon di Illustrator dan Sketch akan menghasilkan elemen <polygon /> di SVG. Di Figma, di sisi lain, semua bentuk yang dibuat dengan alat Polygon menghasilkan elemen <path /> .

Ketiga alat desain juga memiliki alat Bintang khusus untuk menggambar bintang. Namun, saat mengekspor, bentuk yang dibuat dengan alat Star berperilaku sama persis dengan yang dibuat dengan alat Polygon . Di SVG, bintang hanyalah poligon, TIDAK ada elemen ~~<star />~~ .

Penting untuk diingat bahwa alat Bintang dan Poligon digunakan untuk membuat bintang dan poligon beraturan, sedangkan elemen <polygon /> di SVG dapat digunakan untuk poligon apa pun, beraturan atau tidak beraturan.

Semua Jalan Menuju <path />

Seperti yang telah kita pelajari, di SVG, ada tiga bentuk dasar yang didedikasikan untuk menggambar bentuk yang terbuat dari garis lurus: <line /> , <polyline /> dan <polygon /> . Tetapi bagaimana jika kita ingin garis kita melengkung? Sudah saatnya kita berbicara tentang elemen <path /> .

Elemen <path />

<path /> adalah elemen SVG yang paling serbaguna. Ini dapat digunakan untuk menggambar garis dan bentuk apa pun yang memungkinkan, termasuk, namun tidak terbatas pada, semua bentuk dasar yang tercantum di atas. Faktanya, setiap bentuk dasar ( <circle/> , <ellipse /> , <rect /> , <line /> , <polyline /> , <polygon /> ) dapat digambarkan sebagai elemen <path /> . Terlebih lagi, ada banyak bentuk yang dapat dibuat dengan <path /> tetapi tidak mungkin dibuat dengan elemen SVG lainnya. Untuk mempelajari lebih lanjut tentang <path /> dan sintaksnya, saya akan merekomendasikan Anda untuk membaca artikel luar biasa ini oleh Chris Coyier.

Sekarang, bagaimana kita membuat elemen <path /> di alat desain? Pertama-tama, seperti yang kita pelajari di atas, beberapa lapisan yang dibuat dengan alat bentuk menghitung ke elemen <path /> meskipun secara teoritis mereka bisa menjadi elemen lain (misalnya Figma mengekspor semua poligon sebagai <path /> s meskipun mereka bisa saja didefinisikan sebagai <polygon /> s. Kemudian, setiap bentuk tidak beraturan lainnya yang kita gambar dengan Pen tool atau Vector tool harus diekspor sebagai <path /> karena tidak ada elemen SVG lain yang dapat mendefinisikannya. Terakhir, di Sketch dan Figma, kita dapat mengubah bentuk dasar apa pun menjadi lapisan yang menghitung ke <path /> Dalam Sketch, kita dapat melakukannya dengan memilih Layer > Combine > Flatten , sedangkan Figma kita dapat menemukan fungsi ini di bawah Object > Flatten Selection ( + E di macOS, Ctrl + E di Windows).

Operasi Boolean

Operasi Boolean adalah fungsi yang dilakukan pada bentuk untuk menggabungkannya dalam beberapa cara berbeda. Di Illustrator, Sketch dan Figma, ada 4 operasi boolean standar:

• Serikat (Bersatu)
  Jumlah dari bentuk
• Kurangi (Dikurangi depan)
  Bentuk bawah dikurangi dengan area umum di antara bentuk-bentuk itu
• Memotong
  Area umum antara bentuk
• Perbedaan (Kecualikan)
  Jumlah bentuk dikurangi dengan area umum antara bentuk.

Di Illustrator, semua fungsi ini menghasilkan satu bentuk (garis besar). Ini adalah tindakan yang tidak dapat dibalik — selain menggunakan Undo ( + Z di macOS , Ctrl + Z di Windows). Di Sketch dan Figma, di sisi lain, operasi boolean membuat grup lapisan yang dapat dipisahkan di kemudian hari tanpa membahayakan bentuk di dalamnya. Namun, Anda dapat menggabungkan grup ini menjadi satu bentuk untuk mencapai hasil yang serupa seperti di Illustrator menggunakan fungsi Flatten yang disebutkan di paragraf sebelumnya.

Pertanyaannya adalah, apakah SVG mendukung operasi boolean? Tidak. Mereka baru saja bergabung. Oleh karena itu, setiap bentuk gabungan yang Anda buat dengan operasi boolean di Figma atau Sketch akan diekspor sebagai elemen <path /> tunggal.

Kelihatannya Sama, Jadi Mengapa Itu Penting?

Dalam hal bagaimana berbagai bentuk dapat didefinisikan dalam SVG, sintaksnya sangat fleksibel. Mari kita pertimbangkan persegi panjang dasar:

Bentuk seperti itu dapat didefinisikan dalam SVG dalam beberapa cara berbeda. Ini bisa berupa elemen <rect /> , elemen <polygon /> . Itu pasti bisa menjadi elemen <path /> (karena semuanya bisa menjadi elemen <path /> ). Itu juga bisa menjadi elemen <line /> (atau elemen <polyline /> ) jika kita memutuskan untuk membuatnya menggunakan goresan alih-alih isian.

Masing-masing elemen ini membuat persegi panjang yang terlihat persis sama:

Namun, jika hasil akhirnya (grafik yang dirender oleh agen pengguna di browser) terlihat sama, apakah penting pendekatan apa yang kita pilih? Yah, itu benar. Sebagai aturan praktis, saya akan selalu merekomendasikan menggunakan bentuk dasar jika memungkinkan.

Last but not least, gunakan bentuk yang paling jelas untuk kasus yang diberikan. Misalnya, jangan membuat persegi panjang dengan garis atau lingkaran dengan persegi panjang jika Anda tidak memiliki alasan yang baik. Setidaknya ada beberapa argumen di balik itu:

1. Semantik/Keterbacaan
   Alat kompresi, seperti SVGO, memberi Anda opsi untuk menghitung semua bentuk dasar ke elemen jalur. Ini dapat menghemat beberapa gigitan tetapi pasti akan menurunkan keterbacaan kode Anda. Sintaks <path /> sangat tidak intuitif, jadi jika SVG Anda akan dimodifikasi dalam editor kode daripada alat desain, akan jauh lebih mudah untuk memahaminya jika Anda menyimpan bentuk dasar sebagai bentuk dasar.
2. Ukuran file
   Mengompresi bentuk ke jalur dapat membantu Anda mengecilkan file, tetapi tidak selalu demikian! Misalnya, persegi panjang bulat membutuhkan lebih banyak ruang sebagai <path /> daripada sebagai <rect /> .
3. animasi
   Pernahkah Anda mencoba menganimasikan SVG? Ini sangat menyenangkan — selama Anda beroperasi pada SVG semantik yang bersih. Dengan bentuk dasar, Anda dapat dengan mudah memanipulasi parameter seperti radius, lebar, tinggi, atau posisi titik. Jika Anda menggabungkan bentuk Anda ke dalam jalur, sebagian besar operasi tersebut akan jauh lebih sulit untuk dicapai atau tidak mungkin.
4. Varian/Responsivitas
   Ingat bahwa SVG bukan gambar statis seperti JPG. Anda dapat menatanya, memberi tema, membuatnya responsif, dan sebagainya. Sama seperti animasi, menjaga file Anda terstruktur dengan baik dan semantik pasti akan membantu Anda dengan tugas-tugas itu.

Seperti halnya setiap aturan, Anda dapat menemukan beberapa pengecualian. Namun, secara umum, praktik yang baik adalah menjaga SVG Anda agar mudah dibaca, fleksibel, dan terstruktur mungkin.

Sekarang, mari kita lihat atribut dan fitur lain seperti viewBox, grup, transformasi, dan efek visual.

width , height dan viewBox

Jika Anda sudah memiliki pengalaman dengan SVG, Anda mungkin memperhatikan bahwa tag pembuka <svg> sering kali memiliki atribut berikut: width , height dan viewBox . Dalam alat desain, kami memiliki dimensi papan seni (atau bingkai dalam kasus Figma). Jadi bagaimana tepatnya nilai-nilai ini terkait satu sama lain?

Mari kita mulai dengan menjelaskan atribut <svg> yang baru saja kita sebutkan. Anda dapat menganggap viewBox sebagai kanvas virtual dalam bentuk sistem koordinat. Pusat sistem koordinat ini ditempatkan di sudut kiri atas area yang ditentukan. Semua item dalam <svg viewBox="…"> ditempatkan sesuai dengan sistem koordinat ini dan juga dipotong olehnya — apa pun yang viewBox tidak akan dirender. viewBox menerima 4 angka sebagai nilainya:

 <svg viewBox="0 0 12 8"> … </svg>

Karena SVG adalah singkatan dari Scalable Vector Graphics, tidak ada unit yang diperlukan pada angka-angka ini. Bayangkan saja sebagai sistem koordinat abstrak yang dapat ditingkatkan dan diturunkan ke ukuran apa pun. Jangan terlalu khawatir tentang dua angka pertama, kemungkinan besar Anda tidak akan membutuhkannya. Dua yang terakhir adalah yang biasanya penting. Ini adalah dimensi sebenarnya dari kanvas SVG kami.

viewBox tidak menentukan ukuran SVG. Itu hanya menentukan koordinat area di mana SVG kami digambar. Oleh karena itu, ketika digunakan di web, <svg> dengan viewBox tertentu akan selalu mengambil semua ruang yang tersedia dan mempertahankan rasio yang ditetapkan oleh viewBox — kecuali jika kita mencegahnya dengan CSS atau menyetel atribut width dan/atau height .

width dan height adalah atribut <svg> yang mengatur lebar dan tinggi sebenarnya dari elemen SVG. Berlawanan dengan viewBox , mereka harus menggunakan unit tertentu seperti piksel, ems atau rems. Ini berarti bahwa kita juga dapat mengubah SVG dengan mereka — jika rasio antara width dan height berbeda dari rasio antara nilai-nilai viewBox , SVG akan mencondongkan grafik yang ditentukan dalam viewBox sesuai dengan nilai width dan height :

Sekarang, apa yang terjadi ketika kita mengekspor SVG dari alat desain? Di Sketch dan Figma, semua aset (tidak peduli apakah itu lapisan tunggal, grup atau artboards) akan selalu mendapatkan viewBox yang sama dengan dimensi elemen yang diekspor dan width dan height yang diatur dalam piksel, sama dengan dua nilai terakhir dari viewBox . Di Illustrator, semua aset memiliki viewBox , yang ditentukan dengan cara yang sama seperti di Sketch dan Figma, tetapi tidak ada width dan height yang diterapkan.

Grup

Grup adalah sarana dasar untuk mengatur lapisan dalam alat desain. Selain mengatur hierarki, grup digunakan untuk menerapkan operasi massal, seperti transformasi, ke beberapa elemen. Tidak ada perbedaan yang signifikan dalam cara kerja grup di Illustrator, Sketch dan Figma dan, untungnya, fungsionalitas dasar grup SVG ( <g>…</g> ) hampir sama.

Transformasi

Dalam SVG, ada lima transformasi dasar yang dapat kita terapkan pada sebuah elemen:

1. translate : memindahkan elemen di sepanjang sumbu vertikal dan/atau horizontal;
2. scale : menskalakan elemen di sepanjang sumbu vertikal dan/atau horizontal:
3. rotate : membuat rotasi dua dimensi dengan sudut tertentu yang ditentukan dalam derajat di sekitar titik tertentu;
4. skew ( skewX atau skewY ): memiringkan elemen dengan sudut tertentu yang ditentukan dalam derajat di sepanjang sumbu vertikal atau horizontal;
5. matrix : fungsi transformasi yang paling kompleks dan serbaguna yang tersedia. Karena akan membutuhkan cukup banyak pembicaraan aljabar untuk menjelaskan cara kerja transformasi matriks, ini jauh melampaui cakupan artikel ini. Mari kita akui bahwa matrix memungkinkan Anda untuk melakukan banyak transformasi rumit seperti peregangan, pemerasan, geser, dan sebagainya.

Catatan : Perhatikan bahwa meskipun beberapa transformasi SVG terlihat sangat mirip dengan transformasi CSS, mereka tidak sama. Misalnya, CSS menawarkan fungsi rotasi 2D dan 3D sementara SVG hanya memiliki satu fungsi rotasi 2D. Juga, sementara CSS menerima berbagai unit sudut seperti derajat atau radian, rotasi SVG selalu diatur dalam derajat, oleh karena itu sebuah unit dapat dihilangkan (mis . rotate(45) , NOT ~~rotate(45deg)~~ ).

Semua transformasi ini dapat diterapkan ke elemen SVG apa pun, seperti bentuk atau grup, dan bersifat non-destruktif, yaitu tidak memengaruhi geometri asli elemen. Kami menerapkan transformasi melalui atribut transform :

 <g transform="scale(3) rotate(90) translate(50,100)"> … </g>

Mari kita lihat alat desain sekarang! Jadi, sebagian besar transformasi yang kami terapkan dalam alat desain berinteraksi langsung dengan geometri objek dan posisinya di kanvas. Mereka tidak independen dari bentuk dan tidak akan diekspor sebagai fungsi transformasi SVG.

Rotasi di sini pengecualian, dengan nilainya disimpan di Inspector secara terpisah dari geometri elemen dan mereka mengekspor sebagai fungsi transform="rotate(…)" .

Menariknya, aturan yang sama berlaku untuk membalik (refleksi) di Sketch dan Figma (bukan di Illustrator!). Meskipun masing-masing memiliki pendekatannya sendiri. Sketch menggunakan kombinasi penskalaan negatif dan terjemahan untuk mencapai efek flip, sementara Figma melakukan flip dalam fungsi matriks tunggal.

Radius Perbatasan

Kami sudah berbicara tentang persegi panjang bulat tetapi bagaimana dengan pembulatan bentuk lain? Faktanya, di semua alat desain yang kita bahas, Anda dapat membulatkan sudut bentuk apa pun, tidak hanya persegi panjang.

Tapi bagaimana dengan SVG? Apakah elemen <polygon /> dan <path /> juga memiliki atribut rx dan ry ? Sayangnya tidak ada. Bentuk apa pun selain persegi panjang, setelah Anda membulatkan salah satu sudutnya, akan selalu diekspor sebagai elemen <path /> yang memperlakukan sudut yang dibulatkan sebagai bagian integral dari geometri bentuk.

Isi dan Stroke

Illustrator, Sketch dan Figma semuanya mendukung fill dan stroke sebagai properti dasar dari segala bentuk, dan hal itu terjadi di SVG. Oleh karena itu, isian yang ditentukan dalam alat desain diekspor dalam atribut fill dan stoke diekspor dalam atribut stroke . Jangan berpikir semuanya semudah itu. Iblis ada dalam detailnya.

Isi Warna

Isi warna adalah isian paling dasar yang tersedia dan ditentukan dengan satu warna polos (misalnya #3fd8e2 ). Di SVG, nilai ini diletakkan langsung di atribut fill (mis. fill="#3fd8e2" ).

Alat desain mengekspor isian warna dengan nilai hex (misalnya #0000ff ), meskipun, di SVG, Anda juga dapat menggunakan semua skema penamaan lain yang dikenal CSS, seperti nama warna (misalnya blue ), nilai RGB (misalnya rgb(0,0,255) ) atau bahkan nilai HSL (misalnya hsl(240,100%,50%) ).

Isi Opacity

Ketika datang untuk mengisi opacity, SVG menerima warna semi-transparan (misalnya nilai RGBA), meskipun juga menyediakan atribut fill-opacity . Karena masalah kompatibilitas, menggunakan fill-opacity adalah pendekatan yang disarankan dan juga yang digunakan oleh Figma dan Sketch. (Saya tidak menyebutkan Illustrator di sini, karena Illustrator tidak mengizinkan Anda untuk mengontrol opacity fill.) Jadi, jika Anda ingin membuat persegi SVG yang diisi dengan warna merah setengah transparan, Anda dapat melakukan hal berikut:

 <rect width="100" height="100" fill="rgba(255,0,0,0.5)" />

tetapi pendekatan yang lebih direkomendasikan (digunakan oleh Sketch dan Figma) adalah:

 <rect width="100" height="100" fill="#ff0000" fill-opacity="0.5" />

Isi Gradien

Jika Anda terbiasa dengan CSS, Anda mungkin tahu bahwa dalam hal latar belakang, beralih antara latar belakang warna dan gradien relatif mudah. Properti background-color (atau background ) yang sama dapat digunakan dalam kedua kasus. Karena gradien di SVG jauh lebih tua daripada gradien CSS, sintaksnya juga sangat berbeda.

Untuk menggunakan gradien SVG, Anda harus terlebih dahulu mendefinisikannya di dalam <defs>…</defs> dan kemudian merujuknya dalam atribut fill , misalnya:

 <defs> <linearGradient> <stop stop-color="red" offset="0%"></stop> <stop stop-color="blue" offset="100%"></stop> </linearGradient> </defs> <rect fill="url(#myGradient)" />

Jadi, apa yang terjadi selama ekspor SVG ketika Anda menggunakan isian gradien adalah bahwa gradien ditambahkan ke <defs> dan itu direferensikan dalam kode di bawah ini.

Hal penting untuk diingat adalah bahwa SVG hanya mendukung gradien linier dan radial. Efek seperti gradien sudut atau mesh gradien tidak akan diekspor ke SVG.

Pola/Isi Gambar

Sketch dan Figma juga menawarkan Image fill dimana grafik raster digunakan baik untuk mengisi seluruh elemen atau sebagai pola berulang.

Saat mengekspor isian Gambar ke SVG, sebenarnya sangat mirip dengan gradien. Gambar didefinisikan dalam <defs> dengan elemen <pattern>…</pattern> dan kemudian direferensikan dalam atribut fill :

 <defs> <pattern patternUnits="objectBoundingBox"> <use xlink:href="#picture"></use> </pattern> </defs> <rect fill="url(#myPattern)" />

Untuk membuatnya berfungsi, gambar #picture yang direferensikan harus didefinisikan di suatu tempat . Alat desain akan menyematkannya langsung di SVG sebagai elemen <image/> , meskipun itu bukan pendekatan yang disarankan dalam hal kinerja. Jika Anda benar-benar perlu menggunakan gambar raster di SVG Anda, saya sarankan untuk menghapus tag gambar dari SVG dan menggunakannya sebagai file mandiri:

 <defs> <pattern patternUnits="objectBoundingBox"> <use xlink:href="#picture"></use> </pattern> <image xlink:href="image.png"/> </defs> <rect fill="url(#myPattern)" />

Stroke

atribut stroke di SVG, sama seperti atribut fill menerima warna dalam berbagai format, misalnya hex, RGB atau HSL. Dan sama halnya dengan fill , Anda dapat mengontrol opacity stroke dengan stroke-opacity . Juga, sama seperti fill , stroke dapat menggunakan gradien sebagai nilainya. Semua efek tersebut dapat dicapai dalam alat desain dan berhasil diekspor ke SVG.

Stroke Caps Dan Bergabung

Ada juga beberapa atribut khusus stroke. Pertama, Anda dapat mengontrol lebar goresan. Alat desain mendukungnya dan diekspor sebagai atribut stroke-width . Anda juga dapat mengontrol ujung dan gabungan goresan. SVG memungkinkan Anda untuk mendefinisikannya melalui atribut stroke-linecap dan stroke-linejoin . Ada tiga kemungkinan tutup: butt cap, round cap dan square cap, dan tiga kemungkinan join: miter join, round join, dan bevel join. Baik caps dan joins dapat dikontrol di Illustrator, Figma dan Sketch dan caps dan joins yang tersedia cocok dengan yang tersedia di SVG.

Stroke Putus-putus dan Putus-putus

Efek lain yang bisa kita capai dengan stroke adalah stroke putus-putus. Di Illustrator dan Figma, Anda dapat mengatur beberapa tanda hubung dan celah, sedangkan di Sketch, hanya satu urutan tanda hubung dan celah yang dimungkinkan.

SVG memungkinkan Anda membuat garis putus-putus dengan atribut stroke-dasharray . stroke-dasharray memungkinkan urutan beberapa tanda hubung dan celah untuk dilewatkan sebagai nilainya yang cocok dengan fitur Figma dan Illustrator. Ini juga berarti Sketch tidak memungkinkan Anda untuk menggunakan kemungkinan penuh SVG dalam kasus ini.

Kasus tepi yang menarik adalah garis putus-putus. Kami mencapainya dengan mengatur stroke-linecap menjadi round dan panjang tanda hubung ke nol, misalnya:

 <line … stroke="black" stroke-dasharray="0 2" stroke-linecap="round"/>

Catatan : Saat ini, pengguna Figma mengalami bug yang tidak memungkinkan mereka untuk membuat garis putus-putus. Misalnya, menggunakan 0, 10 atau 10, 0 sebagai Garis putus-putus ditafsirkan dengan cara yang sama seperti 10, 10 dan memberikan garis putus-putus biasa daripada garis putus-putus. Untungnya, ada cara untuk menyiasatinya. Daripada menggunakan nol, gunakan nilai yang sangat kecil, misalnya 0.0001, 10 — ini akan menghasilkan garis putus-putus sempurna, seperti yang diharapkan.

Penyelarasan Stroke

Ada satu perbedaan lain yang jauh lebih signifikan antara alat desain dan SVG: penyelarasan goresan. Illustrator, Sketch dan Figma semuanya memungkinkan Anda untuk mengontrol perataan goresan dan mengaturnya di dalam, di luar atau di tengah. Tapi coba tebak? SVG 1.1 tidak mendukung penyelarasan stroke. Di SVG, semua goresan adalah goresan rata tengah. Tidak ada goresan dalam atau goresan luar. Itulah mengapa beberapa hal yang sangat aneh terjadi ketika Anda mengekspor goresan luar dan dalam ke SVG.

Illustrator, dalam kasus seperti itu, mengekspor bentuk dan goresannya sebagai dua bentuk terpisah. Jadi jika Anda menerapkan goresan dalam atau goresan luar ke persegi panjang di Illustrator, di SVG itu akan menghasilkan persegi panjang dan elemen <path /> terpisah yang mewakili goresan persegi panjang, misalnya:

 <rect x="10" y="10" width="120" height="120"/> <path d="M120,20V120H20V20H120M140,0H0V140H140V0Z"/>

Perilaku ini memiliki beberapa dampak yang sangat penting. Misalnya, Anda tidak dapat lagi mengubah lebar goresan atau membuatnya putus-putus. Itu juga tidak akan menskala dengan cara yang sama seperti pukulan "nyata". Terlebih lagi, Illustrator mengubah dimensi bentuk aslinya, misalnya 100x100 persegi dengan 20-unit coretan dalam yang benar-benar akan diekspor sebagai 120x120 persegi untuk menghindari masalah rendering. Akhirnya, itu bukan stroke. Ini hanya bentuk lain dengan isian.

Figma dan Sketch memiliki pendekatan yang berbeda. Mereka dengan setia mengekspor semua goresan sebagai goresan tetapi mereka menghitung ulang dimensi bentuknya. Jadi jika Anda memiliki lingkaran dengan jari-jari sama dengan 5 dan goresan di dalam sama dengan 2, apa yang akan Anda temukan di SVG Anda adalah lingkaran dengan jari-jari sama dengan 4 (dan goresan masih sama dengan 2).

Pendekatan ini memungkinkan Figma dan Sketch untuk menghindari sebagian besar masalah yang disebutkan dalam kasus Illustrator. Namun, dengan beberapa bentuk yang lebih rumit, teknik ini mungkin tidak tepat dan hasil akhirnya sedikit berbeda dari yang diharapkan. Dengan itulah mengapa pendekatan Sketch dan Figma tidak selalu lebih baik — itu pasti lebih semantik, berkinerja dan fleksibel, tetapi solusi Illustrator lebih akurat.

Catatan: Masalah yang sama dengan perataan goresan juga berlaku untuk CSS. Properti border CSS juga tidak mendukung penyelarasan di dalam atau di luar. Namun, jika mau, Anda dapat meretas perilaku ini dengan properti outline dan box-shadow .

Beberapa Isi Dan Stroke

Dalam alat desain, Anda dapat menambahkan beberapa isian dan goresan per lapisan. Ini sangat masuk akal setelah digabungkan dengan atribut seperti opacity dan blend mode. Sayangnya, SVG tidak mendukung fitur seperti itu. Jika Anda mengekspor lapisan yang memiliki isian dan/atau guratan, itu akan dikalikan dan setiap guratan dan isian diterapkan ke lapisannya sendiri.

Bayangan, Filter, Dan Efek Lainnya

Mari kita bicara tentang beberapa efek yang kurang populer sekarang. SVG adalah bahasa yang sangat kuat, bahkan jauh lebih kuat daripada yang biasanya digunakan di web. Salah satu fitur SVG yang paling menarik adalah berbagai efek visual tingkat lanjut, yang dikenal sebagai filter SVG.

Cakupan penuh kemungkinan filter SVG terlalu luas untuk dijelaskan dalam artikel ini. Jika Anda ingin mempelajari lebih lanjut tentang mereka, saya sangat menyarankan Anda untuk membaca beberapa pembicaraan dan artikel tentang topik ini oleh Sarah Soueidan.

Filter, sama seperti pola atau gradien, perlu didefinisikan untuk menerapkannya nanti ke lapisan. Every filter is defined as a <filter>…</filter> element that can contain numerous effects, known as filter primitives , each standing for a separate visual effect.

Filter primitives can be combined together to create filters. For example, this is what a basic blur effect applied to a rectangle looks like:

 <defs> <filter> <feGaussianBlur stdDeviation="10"/> </filter> </defs> <rect filter="url(#GaussianBlur)" width="200" height="300"/>

…but you can also create a more complex filter that consists of more than one filter primitive:

 <defs> <filter> <feGaussianBlur stdDeviation="10"/> <feMorphology operator="dilate" in="SourceGraphic" radius="3" /> </filter> </defs> <rect filter="url(#GaussianBlur)" width="200" height="300"/>

Out of the three design tools we discuss, only Illustrator lets you play with SVG filters. You can find them in the app's menu, under Effect > SVG Filters . Sketch and Figma are a completely different story. Any effects these applications offer are mostly focused on CSS and native implementations, eg Background Blur effect was implemented primarily for designing iOS apps and Drop/Inner Shadow effects parameters are matching CSS properties ( box-shadow and text-shadow ).

It doesn't mean we can't export these effects to SVG. Kita dapat. However, translating these effects to SVG is utterly not as straightforward as to CSS. Let's consider a square with a drop shadow applied.

This is how our square could look like, once exported to HTML/CSS:

 <style> .square { width: 100px; height: 100px; background: red; box-shadow: 10px 10px 24px 0 rgba(0,0,0,0.5); } </style> <div class="square"></div>

A similar square exported from Sketch to SVG gives us a significantly more complex piece of code:

 <defs> <rect x="14" y="14" width="100" height="100"></rect> <filter x="-31.0%" y="-31.0%" width="182.0%" height="182.0%" filterUnits="objectBoundingBox"> <feOffset dx="10" dy="10" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset> <feGaussianBlur stdDeviation="12" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur> <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix> </filter> </defs> <g> <use fill="black" filter="url(#filter-2)" xlink:href="#square"></use> <use fill="#FF0000" fill-rule="evenodd" xlink:href="#square"></use> </g>

What happens here is that Sketch duplicates the square, so we have two identical squares, one above another, and turns the duplicate into a shadow.

To accomplish this, it applies a filter to a duplicated square that consists of three different filter primitives:

• one to offset the square;
• one to set its color to semi-transparent black;
• one to blur it.

In other design tools, we would encounter a similar situation.

It doesn't mean that we should never, by all means, use shadows in SVG. It's handy to keep in mind though that as long as SVG gives you a very powerful toolkit to modify your graphics, some seemingly simple effects are not that simple to achieve at all.

Mode Campuran

Mode campuran (seperti Darken , Multiply atau Overlay ) memungkinkan pencampuran dua atau lebih elemen dengan menggabungkan nilainya dengan cara yang berbeda. Terkenal oleh desainer grafis (dan aplikasi seperti Adobe Photoshop), mode campuran bekerja di Sketch, Figma dan Illustrator juga.

Di SVG, mode campuran ada sebagai salah satu filter. Mereka memiliki filter primitif <feBlend /> mereka sendiri. Namun, karena <feBlend /> cukup rumit, Sketch, Figma, dan Illustrator menggunakan CSS sebagai gantinya:

 .rectangle { mix-blend-mode: overlay; }

Dengan dukungan browser mix-blend-mode yang cukup baik saat ini, seharusnya tidak menjadi masalah besar. Namun, jika penting bagi Anda untuk memastikan dukungan browser antipeluru yang mencakup Microsoft Edge dan IE, Anda harus mengganti mode campuran CSS dengan filter SVG secara manual.

Sama seperti dengan beberapa isian dan guratan, SVG tidak mendukung mode campuran yang diterapkan langsung pada atribut isian dan guratan (bukan pada seluruh lapisan). Jika Anda mencoba mengekspor isian dan goresan dengan mode campurannya sendiri dari alat desain ke SVG, lapisan akan dikalikan dan mode campuran diterapkan ke salinan masing-masing lapisan.

Simbol Dan Komponen

Dalam beberapa contoh kode di atas, Anda mungkin telah memperhatikan sebuah elemen yang belum kita bahas: elemen <use>…</use> . <use> memungkinkan kita mendefinisikan dan menggunakan kembali elemen di SVG, sedikit mirip dengan Simbol di Illustrator dan Sketsa atau Komponen di Figma. Ingat mendefinisikan pola, gradien, dan filter dalam <defs>…</defs> sehingga dapat digunakan di beberapa bagian lain dari kode SVG Anda? Faktanya, setiap elemen SVG dapat didefinisikan dan digunakan kembali dengan cara ini. Setelah Anda menentukan bentuk atau grup, Anda dapat merujuknya ke bagian lain dokumen sebanyak yang Anda suka, misalnya:

 <defs> <circle cx="100" cy="100" r="20"/> </defs> <use fill="red" xlink:href="#circle"> </use> <use fill="green" xlink:href="#circle"> </use> <use fill="blue" xlink:href="#circle"> </use> …

Anda juga dapat menggunakan kembali struktur yang jauh lebih kompleks menggunakan <symbol>…</symbol> . Simbol bertindak sebagai badan terpisah dalam SVG kami dan dapat memiliki atribut viewBox sendiri (lihat Lebar, tinggi dan viewBox untuk referensi).

Apakah itu berarti simbol dan komponen alat desain kami akan diekspor ke simbol SVG? Di Illustrator — ya, memang begitu. Di Sketch dan Figma — tidak, tidak. Mengapa? Terutama, karena simbol Illustrator cukup sederhana dan dapat dengan mudah diterjemahkan ke SVG sementara simbol Sketch dan komponen Figma tidak sesederhana itu dan mengekspor beberapa fiturnya (seperti nested override) akan sangat rumit atau bahkan tidak mungkin.

Teks

Ini tidak akan menjadi panduan yang komprehensif jika kita tidak menyebutkan tipografi. Semua alat desain menawarkan berbagai alat yang terkait dengan teks. SVG, meskipun biasanya digunakan untuk grafik, juga mendukung elemen teks.

Illustrator, Sketch, dan Figma semuanya mendukung ekspor teks ke SVG dan menghitung lapisan teks menjadi elemen <text>…</text> di SVG. Elemen teks SVG dirender seperti elemen grafis lainnya, bentuk, dll. dengan satu-satunya perbedaan adalah teksnya.

Sama seperti di CSS, kita dapat mengontrol semua parameter teks dasar, seperti berat, tinggi garis, atau perataan. Sebenarnya, jika Anda tahu cara menata teks dalam CSS, Anda sudah tahu cara melakukannya di SVG. Namun, mungkin terasa agak kuno. Pertama, semua parameter harus diatur dalam atribut sebaris, mirip dengan standar emas HTML 3.2. Kedua, tidak ada singkatan. Misalnya, Anda tidak akan menemukan sesuatu yang menyerupai properti font CSS. Itu karena atribut teks SVG sebenarnya didasarkan pada spesifikasi CSS 2 yang membawa kita kembali ke tahun 90-an dan jauh lebih tua dari CSS yang kita kenal sekarang.

Meskipun demikian, semua atribut tersebut diekspor dari alat desain dengan sangat baik setiap kali kita ingin beberapa lapisan teks menjadi kode SVG.

Font Khusus

Sayangnya, hal-hal menjadi sedikit rumit ketika datang ke font kustom. Kembali pada hari-hari, ketika standar SVG 1 sedang dibuat, tipografi kustom bukanlah hal yang umum di web. Semua orang menggunakan font standar, seperti Tahoma, Verdana atau Courier. Menjadi mewah dan menggunakan font yang tidak dimiliki orang di mesin mereka secara default, biasanya berarti rasterisasi mereka dengan kejam dan menggunakannya sebagai gambar. Namun, SVG menerapkan format fontnya sendiri, bernama font SVG. Hari ini, 18 tahun setelah SVG 1.0 diterbitkan, font SVG tidak lagi didukung di sebagian besar browser utama.

Beruntung bagi kami, SVG bermain sangat baik dengan CSS, yang berarti kami dapat menggunakan font web daripada font SVG, misalnya:

 <style> @import url("https://fonts.googleapis.com/css?family=Roboto"); </style> <text x="20" y="50" font-family="Roboto">Text</text>

Biarkan saya tidak membahas detail penerapan font web di sini selain dari satu catatan penting: jangan lupakan itu. Dengan kata lain, jika Anda menggunakan font khusus di SVG Anda, Anda harus ingat tentang menyediakan font ini ke klien, sama seperti di HTML/CSS.

Garis Besar Font

Orang mungkin berpendapat bahwa jauh lebih mudah daripada berperang tentang font dan semuanya, adalah menguraikan semua lapisan teks dan jangan khawatir tentang mereka selamanya. Meskipun demikian, setidaknya ada beberapa alasan bagus untuk tidak mengubah teks Anda menjadi bentuk:

1. Anda tidak dapat mengedit teks yang diuraikan — sebelum atau sesudah ekspor.
   Bekerja dengan teks yang diuraikan, Anda harus ingat tentang menyimpan salinan yang dapat diedit di file Illustrator, Sketch, atau Figma Anda setiap saat. Jika tidak, Anda tidak akan dapat mengedit lapisan teks Anda, setelah digariskan. Ini menambah kerumitan yang tidak perlu pada prosesnya. Belum lagi mengedit teks yang diuraikan setelah SVG diekspor. Teks dalam SVG dapat diperbarui setiap saat. Teks yang diuraikan memerlukan pembukaan file sumber setiap kali Anda ingin membuat perubahan salinan terkecil.
2. Teks yang diuraikan tidak dapat diakses .
   Teks dalam SVG, sama seperti elemen teks lain di web, dapat dibaca oleh pembaca layar dan teknologi lain yang dapat diakses. Dengan menguraikan lapisan teks, Anda mencegah orang menggunakan teknologi semacam itu untuk mengakses konten Anda.
3. Orang mengharapkan teks menjadi teks .
   Kebanyakan orang yang menggunakan web sama sekali tidak tahu apa-apa tentang SVG, HTML, atau alat desain. Jika mereka melihat teks, mereka mengharapkannya seperti itu. Mereka mungkin ingin memilihnya, menyalinnya atau memasukkannya ke dalam mesin pencari. Semua ini dimungkinkan dengan teks dalam SVG — kecuali jika Anda menguraikannya.
4. Jangan lupa tentang SEO .
   Teks dalam SVG juga dapat diakses dan digunakan oleh mesin pencari. Dengan menguraikan teks, Anda membuat konten Anda kurang dapat ditelusuri dan berpotensi kurang terlihat oleh publik.

Ringkasan

Terima kasih banyak telah menemani saya dalam perjalanan melalui seluk beluk bekerja dengan SVG dan alat desain. Artikel ini jelas tidak mencakup spektrum penuh topik, meskipun seharusnya cukup untuk menangani kasus penggunaan yang paling umum. Jika Anda memiliki pertanyaan atau pertanyaan tentang hal-hal yang belum disebutkan di sini, jangan ragu untuk mempostingnya di komentar!