Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Design & Illustration
  2. SVG
Design

File SVG: Dari Illustrator Hingga Web

by
Difficulty:BeginnerLength:LongLanguages:
This post is part of a series called Web and Interface Design With Vector.
Create a Set of Glossy Labels and Save them for Web
Quick Tip: How to Create a Simple Web Button Set Using the Appearance Panel

Indonesian (Bahasa Indonesia) translation by Yosef Andreas (you can also view the original English article)

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.

Demonstrating crisp font specimens Why bother with fuzzy raster formats
Mendemonstrasikan spesimen font yang tajam. Mengapa pusing menggunakan format raster yang kabur?

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.

I havent finished this set of SVG icons yet but youre welcome to download and use them
Saya belum menyelesaikan kumpulan icon SVG ini, namun silahkan untuk mengunduh dan menggunakannya..

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.

Recognise this logo

Kenal logo ini?

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

SVG decoration courtesy of fixateit
Dekorasi SVG milik fixate.it

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.

Iconic demonstrating SVG feedback
Iconic yang mendemonstrastikan umpan balik SVG

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.

svg-new-document

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.

svg-webdingst

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):

svg-select

Kemudian pergi ke Type > Create Outlines.

svg-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:

svg-save

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

svg-options

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.

svg-file

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.

svg-save-dialogue

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:

svg-profiles

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.

svg-fonts
  • 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. 

svg-subsetting

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.

svg-embed

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

svg-final

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:

svg-browser

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

More details of SVG and browser support can be found on caniusecom
Lebih detail mengenai SVG dan dukungan browser bisa ditemukan di caniuse.com.

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

svg-in-browser

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.

svg-in-browser-artboard

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.

svg-text-editor

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:

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

svg-in-browser-html

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="":

A beautiful crisp SVG infinitely scalable
Sebuah SVG yang tajam dan indah, dapat berubah skala tanpa batas!

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:

Hasilnya sama persis:

svg-in-browser-html

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

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:

svg-xml

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:

SVG kita:

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:

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!

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.