Mengoptimumkan corak SVG dengan saiz terkecil mereka

Baru-baru ini, saya mencipta corak dinding bata sebagai sebahagian daripada siri #PetitePatterns saya, yang merupakan cabaran dan saya perlu membuat corak atau tekstur yang semulajadi dengan SVG dalam 560 bait (atau kira-kira saiz dua tweet). Untuk memenuhi batasan ini, saya melalui perjalanan yang mengajar saya beberapa cara radikal untuk mengoptimumkan corak SVG supaya mereka mengandungi sedikit kod yang mungkin tanpa menjejaskan kualiti imej keseluruhan.

Saya ingin membawa anda melalui proses dan menunjukkan kepada anda bagaimana untuk mengecilkan corak SVG yang pada asalnya 197 bait kepada hanya 44 bait - pengurangan 77.7% yang menakjubkan!

Corak SVG

Ini dikenali sebagai corak bata "ikatan berterusan". Ini adalah corak bata yang paling biasa, anda mesti melihat sebelum ini: Setiap baris batu bata diimbangi oleh separuh panjang batu bata, membentuk corak yang berulang. Pengaturan ini sangat mudah, menjadikan SVG<pattern></pattern> Unsur -unsur yang bagus untuk menghasilkan semula dalam kod.

SVG's<pattern></pattern> Unsur -unsur menggunakan objek grafik yang telah ditetapkan yang boleh diulangi pada selang tetap pada paksi mendatar dan menegak (atau "berjubin"). Pada asasnya, kami menentukan corak jubin segi empat tepat yang akan mengulangi untuk menarik kawasan mengisi.

Pertama, mari kita tetapkan saiz batu bata dan jurang antara setiap batu bata. Untuk kesederhanaan, mari kita gunakan bilangan bulat yang jelas: batu bata mempunyai lebar 100 dan ketinggian 30, dan jurang mendatar dan menegak di antara mereka adalah 10.

Seterusnya, kita perlu mengenal pasti jubin "asas" kami. "Jubin" merujuk kepada jubin corak, bukan jubin fizikal, dan tidak boleh dikelirukan dengan batu bata. Mari kita gunakan bahagian yang diserlahkan dari imej di atas sebagai jubin corak kita: Terdapat dua batu bata penuh di barisan pertama dan satu bata penuh di barisan kedua yang diapit antara dua setengah batu bata. Perhatikan lokasi dan cara jurang, kerana ini perlu dimasukkan ke dalam jubin corak yang berulang.

gunakan<pattern></pattern> Apabila kita perlu menentukan lebar dan ketinggian corak, mereka sesuai dengan lebar dan ketinggian jubin asas. Untuk mendapatkan saiz, kita perlu melakukan beberapa pengiraan:

<code>图块宽度= 2（砖块宽度） 2（间隙）= 2（100） 2（10）= 220图块高度= 2（砖块高度） 2（间隙）= 2（30） 2（10）= 80</code>

Ok, jadi jubin corak kami adalah 220✕80. Kami juga perlu menetapkan harta patternUnits , di mana nilai userSpaceOnUse pada dasarnya mewakili piksel. Akhirnya, menambah ID corak adalah perlu supaya ia dapat dirujuk apabila melukis elemen lain dengannya.

<code><pattern height="80" patternunits="userSpaceOnUse" width="220"></pattern></code>

Sekarang kita telah menentukan saiz jubin, cabarannya adalah bagaimana untuk membuat kod jubin dengan seberapa sedikit bait yang mungkin untuk menjadikan graf. Inilah yang akhirnya kita harapkan:

Tag awal (197 bait)

Pada pendapat saya, cara yang paling mudah dan paling jelas untuk menghasilkan semula corak ini adalah untuk menarik lima segi empat tepat. Secara lalai, elemen SVG diisi hitam dan sebatan adalah telus. Ini berfungsi dengan baik untuk mengoptimumkan corak SVG, kerana kita tidak perlu mengisytiharkan mereka secara eksplisit dalam kod kami.

Setiap baris dalam kod berikut mentakrifkan segi empat tepat. Lebar dan ketinggian sentiasa ditetapkan, dan kedudukan X dan Y ditetapkan hanya jika segi empat tepat diimbangi dari kedudukan 0.

 <code><rect height="30" width="100"></rect><rect height="30" width="100" x="110"></rect><rect height="30" width="45" y="40"></rect><rect height="30" width="100" x="55" y="40"></rect><rect height="30" width="55" x="165" y="40"></rect></code>

Baris atas jubin mengandungi dua batu bata lebar penuh, bata kedua yang diposisikan pada x = "110", meninggalkan jurang 10 piksel sebelum bata. Begitu juga, terdapat jurang 10 piksel selepas itu, kerana kedudukan akhir bata pada paksi mendatar adalah 210 piksel (110 100 = 210), walaupun jika<pattern></pattern> Lebar adalah 220 piksel. Kami memerlukan sedikit ruang tambahan;

Batu bata di baris kedua (bawah) diimbangi, jadi baris mengandungi dua setengah batu bata dan bata lengkap. Dalam kes ini, kami mahu separuh daripada batu bata untuk bergabung, jadi tidak ada jurang pada awal atau akhir, yang membolehkan mereka menggabungkan dengan lancar dengan batu bata dalam jubin corak bersebelahan. Apabila mengimbangi batu bata ini, kita juga mesti memasukkan setengah jurang, jadi nilai x masing -masing adalah 55 dan 165.

Penggunaan semula elemen (-43b, 154b secara keseluruhan)

Nampaknya tidak cekap untuk menentukan setiap bata dengan jelas. Adakah terdapat cara untuk mengoptimumkan corak SVG dengan menggunakan semula bentuk?

Saya rasa SVG<use></use> Unsur -unsur tidak diketahui secara meluas. Anda boleh menggunakannya untuk merujuk kepada elemen dan penggunaan lain<use></use> Unsur yang dirujuk diberikan di mana -mana sahaja. Ini menjimatkan banyak bait, kerana kita boleh menghilangkan menentukan lebar dan ketinggian setiap bata kecuali bata pertama.

Iaitu,<use></use> Terdapat benar -benar harga untuk membayar. Iaitu, kita perlu menambah ID kepada elemen yang kita mahu gunakan semula.

 <code><rect height="30" width="100"></rect><use href="#b" x="110"></use><use href="#b" x="-55" y="40"></use><use href="#b" x="55" y="40"></use><use href="#b" x="165" y="40"></use></code>

ID yang paling kecil adalah watak, jadi saya memilih "B" untuk bata.<use></use> Unsur boleh menjadi seperti<rect></rect> Kedudukan yang sama, sifat X dan Y digunakan sebagai offset. Sejak kita beralih ke<use></use> Selepas setiap bata kini lebar penuh (ingat, kita secara jelas memotong bata pada separuh pada baris kedua jubin corak), kita perlu menggunakan nilai X negatif di baris kedua dan kemudian pastikan bahawa bata terakhir melimpah dari jubin supaya bata itu dihubungkan dengan lancar. Ini adalah OK kerana apa -apa di luar jubin corak akan dipotong secara automatik.

Bolehkah anda mencari beberapa rentetan pendua yang boleh ditulis dengan lebih cekap? Mari kita pelajari ini seterusnya.

Tulis semula sebagai jalan (-54b, 100b secara keseluruhan)

<path></path> Mungkin elemen yang paling kuat dalam SVG. Anda boleh menarik hampir apa -apa bentuk menggunakan "perintah" dalam d . Terdapat 20 arahan yang tersedia, tetapi kami hanya memerlukan perintah segi empat tepat yang paling mudah.

Inilah yang saya berakhir dengan:

 <code><path d="M0 0h100v30h-100z
         M110 0h100v30h-100
         M0 40h45v30h-45z
         M55 40h100v30h-100z
         M165 40h55v30h-55z"></path></code>

Saya tahu, nombor dan huruf yang sangat pelik! Sudah tentu mereka semua masuk akal. Berikut adalah keadaan dalam kes ini:

• M {x} {y}: Pindah ke titik berdasarkan koordinat.
• Z: Tutup segmen semasa.
• H {x}: Lukis garis mendatar dari titik semasa, dengan panjang x dan arah ditakrifkan oleh simbol x. Huruf kecil x mewakili koordinat relatif.
• v {y}: Lukis garis menegak dari titik semasa, dengan panjang y dan arah ditakrifkan oleh simbol y. Kecil Y menunjukkan koordinat relatif.

Tag ini jauh lebih mudah daripada tag sebelumnya (Break Line dan ruang yang diindir hanya untuk kebolehbacaan sahaja). Dan, hei, kami berjaya memotong saiz awal dengan setengah hingga 100 bait. Masih ada beberapa perkara yang membuatkan saya berasa seperti ini boleh menjadi lebih kecil ...

Semakan jubin (-38b, 62b secara keseluruhan)

Adakah tidak ada bahagian pendua jubin corak kami? Jelas sekali, baris pertama mengulangi bata lengkap, tetapi bagaimana dengan baris kedua? Ia agak sukar untuk dilihat, tetapi jelas jika kita memotong bata tengah separuh.

Nah, batu bata di tengah tidak dipotong sepenuhnya. Terdapat sedikit mengimbangi kerana kita juga harus mempertimbangkan jurang. Bagaimanapun, kami hanya menemui corak jubin asas yang lebih mudah, yang bermaksud lebih sedikit bait! Ini juga bermaksud kita harus<pattern></pattern> Lebar elemen adalah separuh dari 220 hingga 110.

<code><pattern height="80" patternunits="userSpaceOnUse" width="110"></pattern></code>

Sekarang mari kita lihat cara menggunakannya<path></path> Lukis jubin mudah:

 <code><path d="M0 0h100v30h-100z
         M0 40h45v30h-45z
         M55 40h55v30h-55z"></path></code>

Saiznya dikurangkan kepada 62 bait, yang kurang daripada satu pertiga daripada saiz asal! Tetapi mengapa berhenti di sini apabila kita boleh berbuat lebih banyak!

Memendekkan Perintah Laluan (-9b, 53b secara total)

Layak penyelidikan yang lebih mendalam<path></path> elemen, kerana ia memberikan lebih banyak petua untuk mengoptimumkan corak SVG. Digunakan<path></path> Saya mempunyai salah faham tentang bagaimana sifat mengisi berfungsi. Saya memainkan banyak cat MS pada zaman kanak -kanak saya dan saya belajar bahawa apa -apa bentuk yang saya mahu mengisi dengan warna pepejal terpaksa ditutup, iaitu tiada mata terbuka. Jika tidak, cat akan bocor dari bentuk dan menumpahkan segala -galanya.

Walau bagaimanapun, ini tidak berlaku dalam SVG. Izinkan saya memetik spesifikasi itu sendiri:

Operasi pengisian mengisi subpath terbuka dengan melakukan operasi pengisian, seolah -olah perintah tambahan "closePath" ditambah ke jalan untuk menyambungkan titik terakhir subpath ke titik pertama subpath.

Ini bermakna kita boleh menghilangkan arahan laluan tertutup (z) kerana subpath secara automatik dianggap ditutup apabila diisi.

Satu lagi perkara yang berguna mengenai arahan jalan ialah mereka mempunyai varian kes. Huruf kecil menunjukkan penggunaan koordinat relatif;

Keadaan ini agak rumit untuk arahan H dan V kerana mereka hanya mengandungi satu koordinat. Inilah keterangan saya:

• H {x}: Lukis garis mendatar dari titik semasa untuk menyelaraskan x.
• V {y}: Lukis garis menegak dari titik semasa ke koordinat y.

Apabila kita melukis bata pertama dalam jubin corak, kita mulakan dengan koordinat (0,0). Kemudian kami melukis garis mendatar ke (100,0) dan garis menegak ke (100,30), dan akhirnya, lukis garis mendatar ke (0,30). Kami menggunakan arahan H-100 pada baris terakhir, tetapi ia bersamaan dengan H0, iaitu lima bait dan bukannya dua bait. Kita boleh mengganti dua penampilan yang serupa dan<path></path> Kod dikurangkan ke:

<code><path d="M0 0h100v30H0
         M0 40h45v30H0
         M55 40h55v30H55"></path></code>

Dikurangkan sebanyak 9 bait - berapa banyak yang dapat kita kurangkan?

Jambatan (-5b, 48b secara total)

Perintah terpanjang yang menghalang kita daripada mengoptimumkan corak SVG sepenuhnya adalah "bergerak ke" perintah, yang menduduki 4, 5, dan 6 bait masing -masing. Kami mempunyai batasan:

Segmen data laluan (jika ada) mesti bermula dengan perintah "MoveTo".

Tetapi itu tidak penting. Yang pertama adalah yang paling singkat. Jika kita bertukar baris, kita boleh mendapatkan definisi jalan di mana kita hanya perlu bergerak secara mendatar atau menegak di antara batu bata. Bagaimana jika kita boleh menggunakan arahan H dan V di sana bukannya M?

Imej di atas menunjukkan cara menarik tiga bentuk menggunakan satu laluan. Perhatikan bahawa kami memanfaatkan fakta bahawa operasi pengisian secara automatik menutup bahagian terbuka antara (110,0) dan (0,0). Dengan penyusunan semula ini, kami juga menggerakkan jurang ke kiri baris kedua batu bata lebar penuh. Inilah caranya kod, masih dibahagikan kepada satu bata setiap baris:

<code><path d="M0 0v30h50V0
         h10v30h50
         v10H10v30h100V0"></path></code>

Sudah tentu, kami kini mendapati penyelesaian minimum mutlak kerana kami telah berkurangan kepada 48 bait, bukan? ! Baiklah ……

Pemangkasan digital (-4b, 44b secara total)

Jika anda sedikit fleksibel dengan saiz, kami juga boleh mengoptimumkan corak SVG. Kami telah menggunakan lebar bata 100 piksel, tetapi ini memerlukan tiga bait. Menukarnya kepada 90 bermakna bahawa apabila kita perlu menulisnya, ia akan dikurangkan dengan satu bait. Sekali lagi, kami menggunakan jurang 10 piksel - tetapi jika kami menukarnya menjadi 8, kami menyimpan bait setiap kali kami muncul.

<code><path d="M0 0v30h45V0
         h8v30h45
         v8H8v30h90V0"></path></code>

Sudah tentu, ini juga bermakna kita perlu menyesuaikan saiz corak dengan sewajarnya. Berikut adalah kod corak SVG yang dioptimumkan akhir:

 <code><pattern height="76" patternunits="userSpaceOnUse" width="98"><path d="M0 0v30h45V0h8v30h45v8H8v30h90V0"></path></pattern></code>

Baris kedua dalam coretan kod di atas (tidak termasuk lekukan) adalah 44 bait . Kami sampai di sini dari 197 bait melalui enam lelaran. Ini adalah pengurangan saiz 77.7% yang besar!

Walau bagaimanapun, saya tertanya -tanya ... Adakah ini benar -benar saiz terkecil? Adakah kita melihat semua cara yang mungkin untuk mengoptimumkan corak SVG?

Saya menjemput anda untuk cuba menyempitkan kod ini lebih lanjut, dan juga cuba menggunakan alternatif untuk mengoptimumkan corak SVG anda. Saya ingin melihat sama ada kita boleh menggunakan kebijaksanaan orang ramai untuk mencari minimum global yang benar!

Maklumat lanjut mengenai membuat dan mengoptimumkan corak SVG

Jika anda berminat untuk mempelajari lebih lanjut mengenai membuat dan mengoptimumkan corak SVG, baca artikel saya mengenai membuat corak menggunakan penapis SVG. Atau, jika anda ingin melihat galeri lebih daripada 60 corak, anda boleh menyemak koleksi PetitePatterns Codepen. Akhirnya, anda dialu -alukan untuk menonton tutorial saya di YouTube untuk membantu anda mendapatkan pemahaman yang lebih mendalam mengenai corak SVG.

Atas ialah kandungan terperinci Mengoptimumkan corak SVG dengan saiz terkecil mereka. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!