File SVG: Dari Illustrator Hingga Web

Scalable Vector Graphics (SVG) merupakan format gambar vector yang mulai ada pada tahun 1998. Itu selalu dikembangkan untuk web, namun baru sekarang web benar-benar mulai menyesuaikannya. Saat ini relevansinya sudah tidak bisa disangkal, jadi mari kita lihat dasar-dasar membawa SVG dari Illustrator hingga browser web.

Catatan: Saya menggunakan Adobe Illustrator CC untuk melakukan demonstrasi di sini, namun versi lainnya memiliki pilihan dan tools yang serupa (bahkan identik).

Mengapa SVG Berguna?

Format SVG dikembangkan, dan terus dipelihara, oleh World Wide Web Consortium (W3C). W3C meliputi kelompok orang-orang cerdas, yang berjuang untuk standarisasi web, membuatnya menjadi tempat terbuka dan dapat diakses setiap orang.

SVG bagus untuk web, khususnya di masa sekarang, karena itu melewatkan permasalahan resolusi layar. Tidak peduli seberapa padatnya pixel pada smart-phone barumu, vector akan selalu ditampilkan sama tajamnya seperti salju yang baru turun, dimana ini tidak selalu bisa dilakukan dengan gambar raster.

Ukuran file selalu menjadi permasalahan dengan web (tidak ada yang ingin menunggu gambar ukuran 5Tb untuk dimuat ke dalam browser pada koneksi mobile) dan karenanya SVG merupakan format vector yang sederhana. Itu dibuat dengan XML, dan banyak "hal-hal" tidak penting dibuang, menghasilkan sebuah file berukuran relatif ringan.

Terakhir, dengan dasar XML ini, konten sebuah file SVG dapat dimanipulasi dan diterapkan gaya sama seperti elemen lainnya dalam halaman web. Bagian-bagian dimana SVG dapat dipisahkan, warna-warna bisa diubah, bobot goresan bisa diubah, transparansi, kita bahkan bisa menerapkan filter tertentu (seperti blurring), bahkan animate - semuanya melalui CSS dan JavaScript.

Kapan Saya Menggunakan SVG?

Manfaat kualitas garis yang tajam dan kemampuan untuk memanipulasi elemen grafis cukup jelas, namun dimana kamu bisa memanfaatkan ini? Berikut daftar singkat situasi dimana SVG bermanfaat:

Grafis untuk setiap hari: Jika kamu menggunakan grafis pada website, pertimbangkan apakah itu akan dalam format SVG. Jika demikian, mengapa tidak menggunakannya? Fotografi merupakan contoh dimana SVG tidak masuk akal, namun untuk selain itu, pertimbangkan.

Icon: Website di seluruh dunia dibumbui dengan icon; mereka dipahami secara universal (ketika digunakan dengan benar) dan mempersingkat waktu yang diperlukan untuk memproses sebuah aantarmuka. Icon di masa sekarang sering diterapkan pada website melalui font web, namun bisa juga dimasukkan ke dalam sebuah halaman sebagai SVG. Icon yang bersih dan jelas sempurna untuk setiap orang, cakep.

Logo: Jika ada satu hal yang dianggap berharga oleh perusahaan, itu adalah identitasnya. SVG menawarkan cara terbaik untuk menampilkan mereknya di web, polos dan sederhana. Warna-warnanya tepat, kualitas garisnya tidak bernoda dan file yang sama bisa digunakan berulang sepanjang satu website, namun berubah tergantung pada keadaannya. Sempurna.

Dekorasi: Saya tidak perlu menjual ide ini pada kelompok seniman vector, bukan?

Animasi: Melalui CSS3 dan JavaScript sebuah dunia animasi yang baru telah terbuka pada web. SVG merupakan kendaraan yang sempurna, untuk semua alasan pada daftar yang saya tunjukkan sejauh ini. Bisakah kamu membayangkan tombol yang bergerak ketika kamu mengarahkan di atasnya? Icon yang memberikan umpan balik khusus secara langsung? Itu benar-benar tanpa batas.

Jadi demikianlah tentang SVG. Sebuah format vector format, dikembangkan untuk web. Mari kita lihat bagaimana kita bisa menggunakannya.

Menyimpan File Sebagai SVG

Kita akan berkerja dengan gambar yang sangat dasar, untuk mendemonstrasikan apa yang dilakukan SVG.

Dokumen Baru

Buka Illustrator, mulailah sebuah dokumen baru (File > New Document), beri nama jika perlu, dan atur Artboard di 300 x 300px.

Memilih Gambar

Ada perbedaan kecil pada apa yang kamu gunakan sebagai vector demo pada titik ini, namun gunakan sesuatu yang cukup sederhana. Saya menggunakan simbol "Terlarang Untuk Bajak Laut", yang tersedia gratis pada font "Webdings" (Saya tidak pernah mengira akan menggunakannya!)

Pergi ke panel Glyphs (Type > Glyphs) kemudian pilih font "Webdings" untuk melihat berbagai karakter yang tersedia.

Dengan memilih Text Tool, klik pada Artboard, kemudian dobel klik gambar pilihanmu untuk menggunakannya.

Mengubah ke Outline

Kita sekarang akan mengubah gambar ini menjadi outline.

Catatan: SVG mendukung obyek teks, namun untuk mendemonstrasikan tingkat dasar, kita akan menggunakan jalur.

Pilih gambar, dengan menggunakan Selection Tool (V):

Kemudian pergi ke Type > Create Outlines.

Super! Sekarang kita memiliki obyek vector berbasis jalur.

Menyimpan

Untuk menyimpan dokumen ini sebagai SVG, pergi ke File > Save, atau File > Save As..  Di dalam kotak dialog yang muncul, pilih lokasi, beri nama (jika kamu belum melakukannya) dan, yang paling penting, pilih SVG sebagai format:

Kamu akan disajikan dengan dialog lainnya, kali ini dengan beberapa pilihan SVG.

Sejujurnya, mengabaikan pilihan ini pada titik sekarang tidak akan ada masalah. Pilihan default merupakan kondisi standar dalam keadaan normal.

Kita akan membahas beberapa pilihan ini nantinya, namun untuk sekarang, tekan OK.

Kita mempunyai sebuah file SVG!

Jadi Demikianlah, Pilihan SVG Tersebut

Kita melewatkan pilihan SVG karena kamu tidak harus memperhatikan mereka. Namun, demi penjelasan menyeluruh, mari kita lihat.

SVG vs. SVGZ

Untuk memulai, kita bisa memilih antara dua format SVG di dalam dialog penyimpanan.

SVGZ merupakan versi SVG yang sangat terkompres (Versi Zipped, saya rasa). Itu memberikan ukuran file yang lebih kecil, namun mengubah XML di dalam file itu sendiri menjadi tidak berguna, mencegah kita memanipulasi vector melalui CSS dan JavaScript jika kita membutuhkannya.

SVG Profiles

Ranah web yang selalu berubah, dan pengembangan standar web yang berkesinambungan, berarti bahwa SVG selalu bertumbuh. Kamu bisa melihat ini berkat pilihan pertama ketika menyimpan file SVG: SVG Profiles. Pilihan profile umumnya tampak seperti berikut:

Maknanya (lebih atau kurang) seperti di bawah ini:

• SVG 1.0: Wujud pertama SVG (2001)
• SVG 1.1:Hampir sama dengan SVG 1.0, kecuali bahwa SVG 1.1 bisa dipecah menjadi sub-jenis..
• SVG Tiny 1.1: Ini merupakan sub-type pertama dari SVG 1.1 dan dioptimalkan untuk mobile web. Itu merupakan bentuk SVG yang sangat sederhana, didesain untuk "perangkat mobile yang sangat terbatas". Tiny tidak mendukung gradient, transparansi, clipping, masks, symbols, pola, teks bergaris bawah, teks dengan coretan tengah, teks vertikal, atau efek filter SVG.
• SVG Tiny 1.1+: Sedikit pengembangan dengan SVG Tiny 1.1, menambahkan dukungan untuk gradient dan transparansi.
• SVG Basic 1.1: Ini merupakan sub-jenis kedua dari 1.1 dan memungkinkan fitur-fitur untuk perangkat mobile yang lebih mumpuni, seperti smart phone. Basic tidak mendukung non-rectangular dan beberapa efek filter SVG.
• SVG Tiny 1.2: Ini awalnya ditujukan untuk menjadi spesifikasi lengkap SVG berikutnya, namun berakhir menjadi pengembangan sub-jenis Tiny. Jangan tanyakan saya apa perbedaannya.

Segera, kita akan dapat menambahkan SVG 2.0 pada daftar ini. Kenyataannya, perbedaan kecil profiles ini tidak relevan bagi kita. SVG mampu menangani semua jenis hal, namun untuk vector sederhana berpegang pada nilai default SVG 1.1 dan grafismu akan baik-baik saja, jika mungkin, pada web.

Fonts

File SVG bisa menampung jauh lebih banyak daripada hanya sekedar jalur vector. Obyek teks merupakan salah satu contoh, dan pilihan Font memungkinkanmu menentukan bagaimana obyek teks ditangani.

• Adobe CEF: Ini menggunakan petunjuk font untuk menampilkan lebih banyak tipografi. Namun itu tidak didukung oleh semua penampil SVG.
• SVG: Dukungan maksimum, dikenali oleh semua penampil SVG, namun memiliki kekurangan dalam menyaring Adobe CEF.
• Convert To Outlines: Menghapus semua kemampuan editing, namun mempertahankan teks dalam cara yang sama persis, dimanapun itu dilihat. Hasilnya berupa file yang sedikit lebih besar, dimana jalur perlu dijelaskan, daripada hanya menyatakan karakter mana yang ada.

Bagian pilihan font mencakup Subsetting. Ini relevan hanya jika kamu memilih untuk tidak mengubah teks menjadi outline. 

Subsetting memasang detail karakter ke dalam file SVG, memungkinkan file untuk menampilkan font yang mungkin tidak ada dalam sistem pengguna. Memasang keseluruhan font (tentu saja) menghasilkan file yang lebih berat, walaupun kamu bisa memilih seberapa banyak simbol yang dicantumkan.

Options

Sementara kita berada pada subyek penempelan, pilihan terakhir juga bisa berdampak pada ukuran file.

Dalam cara yang hampir sama dengan font file SVG juga bisa menampung gambar bitmap. Dimana kamu melihat Image location pilih "embed" agar gambar dicantumkan di dalam file dalam bentuk code, atau pilih "link" agar gambar cukup menjadi acuan. Ini berkerja dalam cara yang hampir sama dengan menempatkan gambar di dalam Illustrator itu sendiri dan berdampak besar pada ukuran file akhir.

Kotak centang terakhir di sini memungkinkanmu untuk mempertahankan kemampuan editing Illustrator jika diperlukan. Ini berarti bahwa semua detail dari semua layer, filter dan efek, simbol dll akan disimpan. Sekali lagi, pastikan ini tidak dicentang jika SVG siap dibuat dan ukuran file penting.

Catatan: Disarankan agar kamu menyimpan file .AI untuk penggunaan editing.

Beberapa Tombol

Terakhir, ketiga tombol di bagian bawah dialog options berfungsi sebagai berikut:

• More Options: Mari kita biarkan dulu ini untuk sekarang, oke?
• SVG Code..: Menjalankan kode XML, yang berada di dalam file SVG, langsung di dalam text editor.
• Globe: Menjalankan file SVG secara langsung di dalam sebuah browser web. Hanya agar kamu bisa memeriksa.

Penggunaan SVG Dalam Web

Jika kamu tidak terbiasa untuk berkerja secara langsung dengan web, HTML, browser, semua hal tersebut, ada beberapa hal untuk dipertimbangkan pada titik ini.

Browser Web

Pertama-tama, mari kita demonstrasikan kalau browser bisa menangani format ini dengan sangat baik. Klik kanan pada file SVG yang baru kamu buat, dan pilih untuk membukanya dengan browser web standar:

Browser versi lama, seperti Internet Explorer 8 dan sebelumnya, tidak mendukung format SVG, dan sayangnya tidak dapat memainkannya.

Namun selama kamu menggunakan browser modern, file SVG akan terbuka dan ditampilkan tanpa ada masalah.

Hal pertama untuk dicatat adalah bahwa file SVG mempertahankan dimensi asli yang kita miliki.  SVG terbuka pada dimensi 300 x 300px, Artboard menentukan batas luar, dan icon bajak laut ditempatkan pada bagian tengahnya.

Menempelkan SVG di Dalam Halaman Web

Sejauh ini kita telah membuat file SVG dan membukanya dalam sebuah browser untuk memeriksanya.  Sekarang waktunya untuk menggunakan file dengan benar dalam halaman web.

Untuk memulainya kita memerlukan sebuah halaman web. Ini tidak memerlukan lebih dari sebuah file kosong, dengan ekstensi .html, disimpan dari sebuah text editor normal. Tidak perlu khawatir dengan code dalam file ini, namun jika kamu tertarik dalam dasar-dasar HTML, lihat artikel Cara Terbaik Belajar HTML pada beberapa poin.

Berikut file saya, dibuka dalam TextEdit untuk Mac OS X, namun kamu bisa menggunakan text editor atau code editor yang kamu suka.

File ini akan terbuka dalam sebuah browser web sebagaimana adanya, namun kita perlu menambahkan kode HTML "markup" untuk memasang SVG. Ada beberapa pendekatan dalam melakukan ini.

Pendekatan Tag <img>

Pertama-tama, kita bisa menggunakan sebuah tag gambar (yang mungkin kamu gunakan untuk file JPG, PNG dll.) yang diarahkan ke alamat file dalam atribut src="". Tempelkan snippet ini ke dalam file HTML:

1

<img src="SVG-Test.svg" />

Dengan berasumsi alamat file sudah benar, halaman HTML akan terbuka di dalam browser seperti berikut:

Ya, saya tahu efek umum pada tahap ini sama persis dengan tahap dimana kita membuka SVG secara langsung di dalam browser web, namun sekarang kita memiliki lebih banyak daya!  Misalnya, kita bisa secara langsung membuat SVG lebih besar, dengan menggunakan atribut width="":

1

<img src="SVG-Test.svg" width="900" />

Pendekatan ini mungkin merupakan yang termudah, namun memiliki masalah. Beberapa browser, untuk alasan keamanan, akan melarang apa yang dapat kamu lakukan dengan SVG (dengan JavaScript, sebagai contoh). Mari kita lihat alternatifnya.

Pendekatan Tag <object>

Penggunaan tag <object> serupa, namun kamu mengarahkan ke alamat obyek seperti ini:

1

<object type="image/svg+xml" data="SVG-Test.svg"></object>

Hasilnya sama persis:

Untuk browser yang tidak mendukung SVG, you bisa menempatkan sebuah peringatan di dalam konten <object>, untuk ditampilkan jika SVG tidak bisa:

1

<object type="image/svg+xml" data="SVG-Test.svg">This browser sucks</object>

Kebanyakan desainer web setuju bahwa pendekatan ini merupakan yang paling dapat diandalkan dan fleksibel untuk menggunakan SVG di dalam sebuah halaman web untuk saat ini.

Pendekatan Inline

Kita telah berbicara tentang asal XML dari SVG, dan jika kamu membuka file SVG dengan text editor kamu akan melihat sesuatu seperti ini:

Wow, sungguh omong kosong! Sebenarnya, setelah kamu melewati shock awal, kamu hendaknya bisa melihat beberapa hal yang masuk akal di dalamnya. Kita bisa menggunakan kode XML ini secara inline, yaitu dengan menempelkan konten secara langsung ke dalam file HTML.

Ketika kamu menjadi sedikit lebih terbiasa dengan struktur XML SVG, kamu akan dapat memangkas file tersebut, yang membantu menurunkan ukuran file.

Silahkan menghapus baris <!DOCTYPE>, komentar <!-- Generator: Adobe Illustrator, dan bahkan pernyataan <?xml, jika kamu suka.

Yang kamu perlukan hanyalah versi sederhana, yang hanya berisi beberapa tag XML:

1

<svg>

2

  <path/>

3

</svg>

SVG kita:

1

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"

2

	 width="300px" height="300px" viewBox="0 0 300 300" enable-background="new 0 0 300 300" xml:space="preserve">

3

4

	<path d="M220.784,150c0,19.533-6.914,36.214-20.742,50.042c-13.828,13.829-30.51,20.743-50.042,20.743

5

		c-19.533,0-36.213-6.914-50.042-20.743C86.13,186.214,79.216,169.533,79.216,150c0-19.533,6.914-36.213,20.743-50.042

6

		C113.787,86.129,130.468,79.215,150,79.215c19.532,0,36.214,6.914,50.042,20.742C213.87,113.786,220.784,130.467,220.784,150z

7

		 M209.463,150c0-16.421-5.806-30.436-17.416-42.047C180.437,96.343,166.421,90.537,150,90.537c-14.693,0-27.6,4.753-38.72,14.261

8

		l11.149,11.148l-7.865,8.644l-11.322-11.409c-8.47,10.775-12.705,23.048-12.705,36.819c0,16.422,5.804,30.438,17.415,42.048

9

		c11.61,11.609,25.626,17.415,42.047,17.415c13.712,0,25.957-4.265,36.732-12.791l-10.199-10.112l7.778-8.643l10.804,10.717

10

		C204.68,177.514,209.463,164.636,209.463,150z M175.756,177.744c0,7.145-2.521,13.224-7.562,18.236

11

		c-5.043,5.013-11.106,7.52-18.193,7.52c-7.145,0-13.253-2.507-18.323-7.52c-5.071-5.013-7.605-11.092-7.605-18.236v-15.212

12

		c-2.882-0.114-5.315-1.18-7.303-3.197c-1.988-2.017-2.982-4.408-2.982-7.174c0-2.708,0.994-5.069,2.982-7.087

13

		c1.988-2.017,4.421-3.082,7.303-3.198v-38.114c17.861,0,31.315,3.197,40.362,9.593c7.548,5.302,11.322,12.044,11.322,20.225

14

		V177.744z M124.072,158.729v-13.051c-4.207,0.346-6.31,2.507-6.31,6.483C117.762,156.195,119.865,158.384,124.072,158.729z

15

		 M152.333,111.28l-17.977-4.148h-5.963v6.31L152.333,111.28z M165.384,119.663l-7-5.186l-29.991,3.284v6.31L165.384,119.663z

16

		 M170.311,128.824l-2.247-4.84l-39.67,4.754v5.186L170.311,128.824z M171.435,138.418v-4.84l-43.042,4.84H171.435z

17

		 M171.435,177.744v-35.869h-3.458c0,6.167-0.691,10.473-2.074,12.921c-1.383,2.45-3.774,3.674-7.173,3.674

18

		c-6.108,0-9.162-5.532-9.162-16.595h-21.175v35.869H171.435z M146.802,173.681h-3.198v-24.027h-12.187v-2.938h15.384V173.681z

19

		 M138.678,151.728l-2.939,3.112l-2.506-3.112H138.678z M159.68,186.559v-3.371h-19.532v3.371H159.68z"/>

20

21

</svg>

Pendekatan CSS Background

Dengan menggunakan CSS (styling syntax yang digunakan bersamaan dengan HTML) kita bisa juga memerintah file SVG untuk bertingak sebagai gambar latar belakang pada elemen halaman web.

Kita telah melampaui batasan tutorial ini sekarang, namun jika kamu tertaik dalam mempelajari dasar-dasar CSS, lihat Cara Terbaik Belajar CSS.

Kita bisa menggunakan file CSS terpisah, menautkan ke situ dari dokumen HTML, atau kita bisa menggunakan tag <style> secara langsung di dalam HTML secara langsung di dalam HTML. Style akan tampak seperti di bawah ini: Style akan tampak seperti di bawah ini:

1

html { background-image: url(SVG-Test.svg); }

Aturan style ini menyatakan bahwa file SVG hendaklah ditampilkan sebagai latar belakang pada elemen HTML.

Kesimpulan

Sekian tentang hal-hal dasar! Di dalam tutorial ini kita membahas pembuatan SVG, dan penggunaan dasar SVG untuk web.

Jika kamu selalu penasaran dengan SVG, namun tidak pernah mengetahui persisnya cara menggunakannya, saya harap tutorial ini telah membuka matamu.Potensi format ini besar dan bertumbuh berkat imajinasi dan keahlian teknis teman-teman di industri web dan grafis. Potensi format ini besar dan bertumbuh berkat imajinasi dan keahlian teknis teman-teman di industri web dan grafis.

Kami memiliki tutorial lainnya tentang animasi dan berinteraksi dengan grafis SVG, jadi pantau terus!