Grafik Vektor Skala: Lukisan Asas

Artikel ini meneroka konsep asas, struktur, dan elemen lukisan dalam imej SVG. Jika anda baru untuk SVGs, pertimbangkan untuk mengkaji semula sumber pengantar pada grafik vektor berskala sebelum meneruskan.

Konsep Utama:

• SVGs adalah dokumen XML yang berskala untuk sebarang saiz. Sistem koordinat mereka tidak terikat dengan piksel; Atribut viewBox mentakrifkan ruang koordinat imej.
• Elemen SVG asas termasuk garis, polylines, poligon, segi empat tepat, bulatan, elips, dan teks, masing -masing dengan atribut mengawal penampilan dan kedudukan.
• elemen yang kuat path mencipta bentuk kompleks menggunakan arahan dan koordinat, dengan berkesan mereplikasi bentuk asas lain.
• Edit SVGs menggunakan editor teks atau alat berdedikasi seperti Inkscape atau Adobe Illustrator. Animasi mereka menggunakan SMIL, CSS, atau JavaScript. Pengoptimuman melibatkan menghapuskan metadata yang tidak perlu, memudahkan koordinat, dan menyelaraskan laluan.

sistem koordinat svg:

Sistem koordinat SVG, tidak seperti graf matematik, berasal dari kiri atas (0,0), dengan paksi-x yang memanjangkan hak dan paksi-y. Satu titik (100, 200) adalah 100 unit kanan dan 200 unit turun dari asal. Atribut viewBox ("Minx Miny Width Height") mentakrifkan kawasan koordinat. preserveAspectRatio mengawal bagaimana skala viewBox sesuai dengan bekasnya, mengekalkan nisbah aspek seperti yang diperlukan. width dan height tetapkan saiz imej intrinsik.

SVG XML Struktur Dokumen:

Walaupun SVG yang lebih tua menggunakan pengisytiharan XML dan DOCTYPES, SVG moden biasanya menggunakan elemen akar

dengan atribut <svg></svg> yang diperlukan (). Atribut biasa termasuk xmlns, xmlns="https://www.w3.org/2000/svg", viewBox, dan preserveAspectRatio. Pilihan width dan height elemen menyediakan metadata. <title></title> <desc></desc>

Contoh:

<code class="language-xml"><svg xmlns="https://www.w3.org/2000/svg" viewbox="0 0 600 400" preserveaspectratio="xMidYMid meet">
  <title>My First SVG</title>
  <desc>A simple SVG example.</desc>
  <!-- ... SVG elements here ... -->
</svg></code>

elemen kumpulan ():

<g></g> elemen elemen elemen SVG untuk manipulasi yang lebih mudah sebagai satu unit menggunakan CSS atau JavaScript.

Bentuk asas dan laluan: <g></g>

Butiran artikel penggunaan

, , ,

,

, <line></line>, dan <polyline></polyline> unsur -unsur, menggambarkan atribut dan rendering mereka. Keupayaan elemen <polygon></polygon> diserlahkan, dengan merujuk kepada maklumat yang lebih terperinci mengenai mewujudkan laluan kompleks. Cap garis dan gaya gabungan dijelaskan dengan contoh visual. <rect></rect>

Pengoptimuman dan sumber selanjutnya:

Artikel ini menyimpulkan dengan menekankan teknik pengoptimuman SVG dan menyediakan pautan kepada sumber selanjutnya, termasuk rujukan elemen dan atribut, panduan penciptaan laluan, dan alat minifikasi. Seksyen Soalan Lazim menangani pertanyaan umum mengenai penciptaan SVG, penyuntingan, animasi, pengoptimuman, dan respons.

Atas ialah kandungan terperinci Grafik Vektor Skala: Lukisan Asas. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!