SVG menggodam untuk anda

Saya mendapat motivasi oleh Bytes #293 perkara utama tentang HTML. Motivasi mereka datang daripada tinjauan State of HTML 2023 (dan wang... tetapi mari tinggalkan bahagian yang ditaja daripada mel).

Nampaknya

Titik masuk

Jika anda tidak biasa dengan perkara ini sama sekali, saya boleh membantu dengan banyak pautan untuk permulaan. Selepas itu, tiada apa yang akan berubah tetapi anda akan mengetahui lebih lanjut tentang svg
¯_(ツ)_/¯

• https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web
• https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Introduction
• Tutorial SVG daripada MDN: https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Getting_Started

Tl;DR

Elemen SVG ialah elemen grafik vektor. Ini boleh difahami sebagai sekumpulan angka geometri yang diwakili dalam aksara. Anda boleh mencipta satu contohnya dengan Adobe Illustrator atau Inkscape sebagai alternatif percuma.

Titik permulaan

Daripada jawapan orang, kita boleh lihat beberapa corak. Saya tidak akan memilih mana-mana yang khusus tetapi saya akan cuba berkongsi sedikit pengetahuan tentang topik tersebut supaya anda boleh mendapatkan di sini beberapa petua&trik, perkongsian pengalaman dan pengetahuan umum lain mengenai topik ini.

Saya akan melangkau topik sprite SVG seperti contoh ini. Ia adalah topik yang berasingan dan tidak begitu berkaitan dengan teg svg. Saya hanya boleh bersetuju bahawa anda masih boleh menemui beberapa kes penggunaan yang jarang berlaku untuk mereka.

Sintaks fail

Fail SVG yang betul hendaklah mewakili angka geometri yang disebutkan. Sangat mudah untuk menyemak sama ada ikon kami disediakan dalam format yang betul oleh pereka bentuk atau tapak web tempat anda mengambilnya.

Contoh yang salah:

<svg ...><image link:href="data:image/png;base64 .../>

Sintaks yang dijangkakan:

<svg><g><path r=""/><circle /></g></svg>

Sepanjang kerjaya saya, saya melangkah ke perkara ini beberapa kali. Patut diingati. Ia berlaku apabila anda mengambil grafik raster, mengimportnya ke program grafik vektor dan cuba mengeksportnya dalam sambungan .svg. Ia tidak menukar imej anda kepada grafik vektor secara ajaib.

Tag SVG yang terkenal

Saya boleh membentangkan anda helaian tipu untuk kebanyakan elemen svg generik.

Tag	Description	Animated attributes
	used for grouping elements	-
	main tag for your actual icon. Avoid modifying the d="" attribute on your own ? It is possible but be careful with that. Grab a link with an explanation for each character group. To animate your path use animateMotion tag	-
	Basic rectangle shape in SVG. Simple as that	✅
	Simple as that. The line between two points. Don't mistake with the stroke attribute! It can also be used on the line tag.	✅
	You can think about it as an enhancement version of the g tag but it keeps the elements inside invisible for later use with, let's guess it... use tag	-
	Next basic shape. Be careful as the size is defined by radius and you position your circle with cx and cy attributes.	✅
	Let's call it a custom shape. They are connected straight lines where the last point connects to the first point.	✅
	Very similar to the previous one but with a notable difference. The last point doesn't need to be connected to the first point.	✅

Sila ambil perhatian bahawa itu hanyalah beberapa elemen SVG terpilih. Saya baru sahaja menerangkan yang paling biasa. Terdapat banyak lagi yang tersedia untuk anda gunakan. Senarai penuh boleh didapati di sini.

Saiz dan kedudukan

Memandangkan kita sudah biasa dengan beberapa teg svg biasa, kita boleh pergi ke perenggan seterusnya untuk mengubah suai parameter asas ikon kita.

Katakan kami bekerja dengan pereka muda. Dia belum tahu sepenuhnya cara menyediakan sesuatu untuk web seperti yang anda lakukan. Akibatnya, kadangkala anda mendapat saiz ikon yang sedikit berbeza dengan pelapik potongan tiada di bahagian tepi.

good one	wrong one

Sarung klasik. Saya tahu kita perlu membuat panggilan pantas dengan pereka bentuk dan menjelaskan perkara ini tetapi kami ingin mempelajari beberapa svg di sini. Kami tidak melakukan itu dalam senario ini. Kami boleh membetulkannya sendiri.

Dari perspektif kod, ini semua tentang atribut. Fail silang SVG asal kelihatan seperti ini:

<svg ...><image link:href="data:image/png;base64 .../>

Hasil dalam:

Hampir apa yang kita mahu! Mari kita gali lebih jauh bagaimana kita boleh mengekalkan padding seperti dalam ikon pertama.

Kami ada 2 pilihan. Kita boleh mengekalkan nilai kotak paparan yang sama atau kita boleh melaraskan setiap nilai lebar, tinggi, x dan y pada setiap teg bersarang.

Pilihan pertama kelihatan mudah dan ia berfungsi dengan baik untuk kami tetapi mungkin ada tangkapan. Dalam kes saya, saya mempunyai atribut perubahan pelik ini pada teg kumpulan saya.

<svg><g><path r=""/><circle /></g></svg>

Kini saiz ikon kami boleh laras. Sila ambil perhatian bahawa ia adalah grafik vektor supaya kami tidak kehilangan kualiti ikon selepas saiz semula.

Jadi mengapa viewBox sangat penting?

Ia adalah kunci apabila kita ingin menskala atau menetapkan kedudukan tertentu pada ikon kita dengan betul. Ia mempunyai 4 argumen viewBox="min-x min-y ketinggian lebar".

Sebagai contoh, viewBox="0 0 100 100" bermaksud penjuru kiri sebelah atas berada di (0, 0) dan viewBox ialah 100 unit lebar dan 100 unit tinggi.

Ini bermakna anda perlu melaraskan atribut ikon x dan y anda selepas menukar ViewBox kerana ia ditetapkan mengikut nilainya.

Mengurus warna dan mengisi

Ikon berbeza membenarkan isian berbeza. Sudah tentu, ia boleh semudah menambah gaya warna tetapi itu adalah jenis kod peringkat rookie.

Pembangun sebenar menambah fill-rule="evenodd" pada elemen utama dan memadamkan semua atribut isi manual lain daripada teg ?

Anda mungkin tertanya-tanya mengapa.

Saya akan memberikan jawapan yang sesingkat mungkin untuk ini. Untuk menyesuaikan warna ikon kami secara bebas dengan satu baris kod terus dari IDE kami.

Bagaimana mungkin anda boleh bertanya.

Jika anda berurusan dengan ikon ringkas daripada sistem reka bentuk syarikat anda, anda sepatutnya boleh mengimport satu ikon sahaja. Pengubah suai atau pendua dalam saiz atau warna tidak diperlukan.

Dari perspektif kod, anda hanya perlu menambah isian pada elemen svg seperti yang biasa anda lakukan dengan contohnya atribut warna.

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->

<svg
   width="93.582886"
   height="93.582893"
   viewBox="0 0 24.760471 24.760474"
   version="1.1"
  >



<p>This is our raw svg exported from Inkscape. There are a few other things to fix, bear with me so we can fix them.</p>

<p>We know that 200px image is our goal. Here we have some ugly width/height values on the main svg tag.</p>

<p>Simply:<br>
</p>

<pre class="brush:php;toolbar:false"><svg
-   width="93.582886"
+   width="200"
-   height="93.582893"
+   height="200"

Terdapat tangkapan untuk nilai evenodd yang digunakan apabila anda melukis poligon atau laluan. Ia hanya akan mengisi bahagian dalam segmen laluan lintasan.

Pertimbangkan untuk menganalisis contoh ini sekiranya anda bergelut dengannya.

Jadi dalam kes ikon salib kami, ia akan menghasilkan sesuatu seperti ini:

Mengoptimumkan

Sebelum kami menerbitkan ikon kami ke web (atau sejurus selepas kami memuat turunnya daripada Figma), kami harus memastikan ia dioptimumkan dengan betul. Yang ini sangat penting. Saya telah ditangkap dan ditangkap terlalu banyak kali semasa semakan kod pada batu terakhir ini.

SVGO (atau SVGR untuk tindak balas) menjadikannya proses yang sangat mudah. Di sebalik tabir, ia kebanyakannya memadamkan semua perkara yang tidak perlu untuk kami.

Secara amnya, ia adalah alat yang boleh digunakan. Sama ada anda mahu menyepadukannya dengan pengikat anda atau menggunakannya daripada CLI. Ia sedia untuk digunakan sejurus selepas pemasangan kerana kami mendapat pratetap lalai dikonfigurasikan di luar kotak.

Nota: Anda boleh menulis ganti pratetap lalai jika anda benar-benar mahu. Semak konfigurasi dalam projek README dan senarai pemalam dalam dokumen

Hasilnya

Kod ikon terakhir kelihatan seperti ini:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50"><g fill-rule="evenodd"><laluan d= "M9 24j32v3H9z">



<p>Kami telah mengurangkan saiz daripada 871 bait dengan ikon mentah yang dieksport daripada ruang dakwat kepada hanya 322 bait.</p>

<h2>
  
  
  Sakit dengan animasi
</h2>

<p>Topik terakhir yang pahit manis bagi saya. Ia telah dibawa dalam jawapan tinjauan beberapa kali juga. Saya tidak tahu cara yang lebih baik untuk melakukannya kecuali menggunakan Lottie atau elemen animasi SVG secara manual dalam CSS. Pilihan kedua ialah penyeksaan mutlak apabila anda mempunyai lebih daripada 5 elemen untuk dianimasikan.</p>

<p>Sudah tentu, ia mungkin dan kita boleh melakukannya tetapi secara jujur, ada perkara yang lebih menarik untuk dilakukan?</p>

<p>Andaikan anda masih ingin tahu cara melakukannya. Saya meninggalkan pautan ke artikel yang hebat di sini. Ia harus meyakinkan anda bahawa ia memerlukan kesabaran dan mengambil masa lebih daripada 5 minit. Saya tertanya-tanya jika bot AI boleh membantu anda dengan itu! Jika ya, mungkin ia agak kurang menyakitkan.</p>

<p>Itu sahaja buat masa ini.<br>
Mudah-mudahan, anda mengambil sesuatu daripada siaran ini dan selamat menikmati hari anda ?</p>


          

            
        

Atas ialah kandungan terperinci SVG menggodam untuk anda. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!