Cara Memudahkan Kod SVG Menggunakan Bentuk Asas

Terdapat banyak cara untuk menangani ikon, tetapi pendekatan terbaik selalu termasuk SVG, sama ada ia dilaksanakan secara sejajar atau sebagai pautan ke fail imej. Ini kerana mereka "ditarik" dalam kod, menjadikannya fleksibel, boleh disesuaikan dan berskala dalam mana -mana persekitaran.

Walau bagaimanapun, apabila menggunakan SVG, ia sentiasa mungkin untuk memasukkan banyak kod yang tidak perlu . Dalam sesetengah kes, kod untuk SVG yang digariskan boleh begitu lama sehingga skrol dokumen lebih lama dan tidak selesa untuk digunakan, dan ya, sedikit lebih berat daripada yang diperlukan.

Kita boleh menggunakan<use></use> Elemen menggunakan semula blok kod, atau memohon pembolehubah asli untuk menguruskan gaya SVG kami di satu tempat. Atau, jika kita bekerja dalam persekitaran pelayan, kita sentiasa boleh menambah beberapa PHP (atau serupa) untuk mengekstrak kandungan fail SVG dan bukannya meletakkannya secara langsung.

Ini semua baik, tetapi tidakkah lebih baik jika kita dapat menyelesaikan masalah ini di peringkat fail dan bukannya menggunakan pendekatan berasaskan kod? Saya ingin memberi tumpuan kepada perspektif yang berbeza : bagaimana membuat graf yang sama dengan kod kurang menggunakan bentuk asas . Dengan cara ini, kita boleh mendapatkan manfaat ikon yang lebih kecil, lebih terkawal dan semantik dalam projek tanpa mengorbankan kualiti atau perubahan visual. Saya akan merangkumi contoh yang berbeza, meneroka kod untuk ikon biasa dan bagaimana untuk mengecat semula mereka menggunakan beberapa bentuk SVG yang paling mudah yang boleh kita buat.

Berikut adalah ikon yang akan kita hadapi:

Mari kita lihat bentuk asas yang boleh kita gunakan untuk membuat ikon -ikon ini menyimpan kod yang kecil dan mudah.

Shh! Berikut adalah senarai lebih panjang ikon mudah yang saya buat di holasvg.com! Selepas membaca artikel ini, anda akan tahu bagaimana untuk mengubah suai mereka dan menjadikannya milik anda.

gunakan<line></line> Elemen Ikon Tutup Ringkas

Berikut adalah kod untuk ikon "Tutup" atau "Cross" yang dimuat turun dari flaticon.com dan dibina oleh Pixel-Perfect:

Dalam contoh ini, semuanya berlaku<path></path> Di dalam, terdapat banyak arahan dan parameter dalam atribut data (D). Apa yang dilakukan oleh SVG ini adalah menjejaki bentuk dari sempadannya.

Jika anda sudah biasa dengan Illustrator, ini bersamaan dengan menarik dua baris berasingan, menukarnya ke dalam bentuk, dan kemudian menggabungkan kedua dengan pencari jalan untuk membuat bentuk komposit.

<path></path> Unsur -unsur membolehkan kita menarik bentuk kompleks, tetapi dalam hal ini kita dapat mencipta angka yang sama dengan dua baris sambil mengekalkan penampilan yang sama:

<code><svg height="50" overflow="visible" stroke="black" stroke-linecap="round" stroke-width="10" viewbox="0 0 50 50" width="50" xmlns="http://www.w3.org/2000/svg">
<line x1="0" x2="50" y1="0" y2="50"></line>
<line x1="50" x2="0" y1="0" y2="50"></line></svg></code>

Kami mula -mula menentukan kotak viewbox, dari 0,0 hingga 50,50. Anda boleh memilih saiz yang anda suka; SVG akan sentiasa berskala dengan lebar dan ketinggian yang anda tentukan. Untuk memudahkan operasi, dalam kes ini saya juga menentukan 50 unit lebar dan ketinggian dalam talian, yang mengelakkan pengiraan tambahan dalam lukisan.

Untuk digunakan<line></line> Elemen, kita perlu mengisytiharkan koordinat titik pertama garis dan koordinat titik terakhir. Dalam contoh ini, kita mulakan dengan x = 0 y = 0 dan berakhir dengan x = 50 y = 50.

Inilah yang kelihatan seperti kod:

<code><line x2="50" y2="50"></line></code>

Baris kedua akan bermula dengan x = 50 y = 0 dan berakhir dengan x = 0 y = 50:

<code><line x1="50" y2="50"></line></code>

Strok SVG tidak mempunyai warna secara lalai - itulah sebabnya kami menambah nilai hitam ke atribut strok. Kami juga menyediakan 10 unit lebar untuk harta lebar stroke dan menetapkan stroke-linecap ke nilai bulatan untuk menyalin sudut-sudut bulat reka bentuk asal. Ciri -ciri ini ditambah terus ke<svg></svg> Dalam tag, jadi kedua -dua baris akan mewarisi mereka.

Oleh kerana strok adalah 10 unit yang lebih besar daripada saiz 1 unit lalainya, viewbox boleh menanam garisan. Kita boleh memindahkan titik 10 unit ke dalam kotak viewbox, atau menambah limpahan = boleh dilihat dengan gaya.

Nilai yang sama dengan 0 boleh dipadam kerana 0 adalah nilai lalai. Ini bermakna bahawa dua baris berakhir dengan hanya dua baris kod yang sangat kecil:

<code><line x2="50" y2="50"></line><line x1="50" y2="50"></line></code>

Hanya dengan<path></path> Berubah menjadi<line></line> , Kita bukan sahaja membuat fail SVG yang lebih kecil, tetapi juga membuat blok kod yang lebih semantik dan dikawal, yang menjadikan penyelenggaraan masa depan lebih mudah. Kesan visual adalah sama seperti imej asal.

Salib yang sama, kod yang berbeza.

gunakan<circle></circle> dan<path></path> Ikon jam mudah elemen

Saya mendapat contoh ikon jam ini dari Barracuda dalam projek kata nama:

Bentuk ini juga digunakan<path></path> Lukis, tetapi kami juga mempunyai banyak ruang nama dan arahan XML yang berkaitan dengan perisian dan lesen fail yang digunakan, yang boleh kami padamkan tanpa menjejaskan SVG. Bolehkah anda memberitahu editor ilustrasi mana yang hendak digunakan untuk membuat ikon?

Mari kita buat semula ini dari awal menggunakan bulatan dan jalan dengan arahan yang lebih mudah. Sekali lagi, kita perlu bermula dengan kotak viewbox, kali ini dari 0,0 hingga 100,100, dan lebar dan ketinggian sepadan dengan unit tersebut.

<code><svg fill="none" height="100" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="10" viewbox="0 0 100 100" width="100" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="40"></circle><path d="M50 25V50 H75"></path></svg></code>

Kami akan<svg></svg> Gaya dalam label tetap sama dengan ikon sebelumnya. Isi lalai kepada hitam, jadi kita perlu secara jelas memberikan nilai tiada kepadanya untuk memadamkannya. Jika tidak, bulatan akan mempunyai mengisi hitam tulen, menghalang bentuk lain.

Untuk menarik<circle></circle> , kita perlu menunjukkan titik tengah di mana jejari akan ditempatkan. Kita boleh melakukan ini dengan Cx (Center X) dan Cy (Center Y). Kemudian R (radius) akan mengisytiharkan betapa besarnya bulatan kami. Dalam contoh ini, jejari sedikit lebih kecil daripada kotak viewbox, jadi ia tidak akan dipotong apabila lebar strok adalah 10 unit.

Apa yang berlaku dengan semua surat ini? Semak panduan ilustrasi Chris Coyier untuk pengenalan kepada tatabahasa SVG.

Kita boleh menggunakan penunjuk jam<path></path> , kerana ia mempunyai beberapa arahan lukisan yang sangat berguna dan mudah. Dalam D (data), kita perlu bermula dengan perintah M (pindah ke) diikuti oleh koordinat yang kita akan mula melukis, dalam kes ini 50,25 (berhampiran pusat atas bulatan).

Selepas arahan V (menegak), kita hanya memerlukan satu nilai, kerana kita hanya boleh bergerak ke atas atau ke bawah menggunakan nombor negatif atau positif. Nombor positif akan bergerak ke bawah. Begitu juga dengan H (tahap), diikuti dengan nombor positif 75, yang akan ditarik ke kanan. Semua arahan dipermodalkan, jadi nombor yang kami pilih akan menjadi mata dalam grid. Jika kita memutuskan untuk menggunakan huruf kecil (arahan relatif), bilangannya akan menjadi bilangan unit yang kita bergerak dalam satu arah, bukan titik mutlak dalam sistem koordinat.

Jam yang sama, kod yang berbeza.

gunakan<rect></rect> dan<polyline></polyline> Ikon sampul surat yang dipermudahkan elemen

Saya menarik ikon sampul surat di Illustrator tanpa memperluaskan bentuk asal. Inilah kod yang diperoleh dari eksport:

Illustrator menyediakan beberapa pilihan SVG untuk mengeksport grafik. Saya memilih "elemen gaya" dalam menu drop-down "CSS Properties" supaya saya boleh mempunyai tag dengan kategori yang saya mungkin mahu bergerak ke dalam fail CSS. Sudah tentu, terdapat banyak cara untuk memohon gaya SVG.

Kami sudah mempunyai beberapa bentuk asas dalam kod ini! Saya tidak memilih pilihan "Bentuk ke Laluan" dalam Illustrator, yang banyak membantu di sini. Kami dapat mengoptimumkannya dengan menggunakan SVGOMG untuk mengeluarkan komen, arahan XML dan data yang tidak perlu seperti elemen kosong. Kita secara manual boleh memadam tambahan tambahan dari sana jika diperlukan.

Kami sudah mempunyai sesuatu yang lebih mudah:

<code><svg version="1.1" viewbox="0 0 310 190" x="0" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" y="0">
 .st0 {fill: none; stroke:#000; stroke-width: 10; stroke-linecap: round; stroke-linejoin: round; stroke-mitermit: 10}
<rect height="180" width="300" x="5" y="5"></rect>
<polyline points="5 5 155 110 305 5"></polyline></svg></code>

Kami boleh memadam lebih banyak kandungan tanpa menjejaskan penampilan visual sampul surat, termasuk:

• Versi = "1.1" (Dihapus sejak SVG 2)
• (Ini tidak mempunyai makna atau tujuan)
• x = "0" (ini adalah nilai lalai)
• y = "0" (ini adalah nilai lalai)
• XML: Space = "Preserve" (Ditiru sejak SVG 2)

<code><svg viewbox="0 0 310 190" xmlns="http://www.w3.org/2000/svg">
 .st0 {fill: none; stroke:#000; stroke-width: 10; stroke-linecap: round; stroke-linejoin: round; stroke-mitermit: 10}
  
<rect height="180" width="300" x="5" y="5"></rect>
<polyline points="5 5 155 110 305 5"></polyline></svg></code>

Jika kita benar -benar mahu menjadi sangat agresif, kita boleh memindahkan gaya CSS ke dalam lembaran styles yang berasingan.

<rect></rect> Perlu titik permulaan di mana kita akan mengembangkan lebar dan ketinggian dari sana, jadi mari kita gunakan x = "5" dan y = "5" sebagai titik sudut kiri atas kita. Dari sana, kami akan membuat segi empat tepat dengan lebar 300 unit dan ketinggian 180 unit. Sama seperti ikon jam, kami akan menggunakan 5,5 sebagai titik permulaan kerana kami mempunyai strok 10 unit yang akan dipotong jika koordinat berada pada 0,0.

<polyline></polyline> Sama dengan<line></line> , tetapi elemen ini selalu mentakrifkan bentuk tertutup. Berikut adalah contoh terus dari MDN:

Ingat bulatan yang kami menarik untuk ikon jam sebelum ini? Gantikan R (radius) dengan Rx dan Ry. Sekarang anda mempunyai dua nilai radius yang berbeza. Berikut adalah contoh lain dari MDN:

Meringkaskan

Kami meliputi banyak kandungan dalam masa yang singkat! Walaupun kami menggunakan contoh untuk menunjukkan proses mengoptimumkan SVG, saya harap anda mendapat perkara berikut dari siaran ini:

• Ingat bahawa mampatan bermula dengan cara SVG ditarik dalam perisian ilustrasi.
• Gunakan alat yang ada seperti SVOMG untuk memampatkan SVG.
• Secara manual memadam metadata yang tidak perlu jika perlu.
• Gantikan laluan kompleks dengan bentuk asas.
• <use></use> Adalah cara yang baik untuk "inline" SVGs dan membina perpustakaan ikon anda sendiri yang boleh diguna semula.

Berapa banyak ikon yang boleh dibuat dengan menggabungkan bentuk asas ini?

Saya membuat senarai saya di holasvg.com/icons, dan saya akan terus memuat naik lebih banyak ikon dan ciri -ciri di sini, sekarang anda tahu bagaimana untuk mengubahnya dengan mudah dengan menukar beberapa nombor. Teruskan, biarkan mereka menjadi milik anda!

Atas ialah kandungan terperinci Cara Memudahkan Kod SVG Menggunakan Bentuk Asas. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!