svg: Kelebihan dan aplikasi grafik vektor berskala

SVG (grafik vektor berskala) adalah format fail imej yang unik yang menggabungkan bentuk, garis, lengkung, maklumat teks dan warna untuk membina imej. Tidak seperti format berasaskan piksel seperti fail JPG, PNG, dan GIF, SVG lebih seperti "resipi" untuk membuat grafik, membolehkan mereka mengezum tanpa kehilangan kualiti imej atau meningkatkan saiz fail.

Fail SVG mempunyai banyak kelebihan, termasuk skalabilitas dan responsif, programmabiliti dan interaktiviti, kebolehaksesan dan prestasi. Mereka boleh digunakan untuk pelbagai tujuan, termasuk ilustrasi, carta, logo, ikon, animasi, carta interaktif, infographics, peta, kesan khas, dan antara muka dan aplikasi bangunan.

Fail SVG boleh dibuat menggunakan aplikasi grafik vektor seperti FIGMA, Adobe Illustrator, Boxy SVG, dan editor SVG. Mereka bersesuaian dengan semua pelayar web moden, boleh digunakan untuk percetakan dan boleh dioptimumkan untuk prestasi yang lebih baik. Walau bagaimanapun, pelanggan e -mel tidak menyokong SVG, jadi menggunakan imej raster tradisional dalam e -mel secara umumnya lebih selamat.

Apa itu SVG?

SVG (grafik vektor berskala) adalah format fail imej yang menggabungkan bentuk, garis, lengkung, maklumat teks dan warna untuk membina imej. Format imej yang paling biasa digunakan (seperti JPG, PNG, dan GIF) data imej sebagai permutasi piksel tertentu, manakala fail SVG lebih seperti "penerangan bertulis" atau "resipi" untuk membuat grafik yang diberikan. Ini bermakna SVG (seperti resipi yang baik) boleh diperbesar tanpa kehilangan kualiti imej dan tanpa meningkatkan saiz fail. Kod SVG adalah bahasa berasaskan teks, manusia yang boleh dibaca dengan sifat yang serupa dengan HTML atau XML.

Apakah fail SVG kelihatan seperti?

Buka fail SVG yang sangat mudah dalam pelayar web moden dan anda akan melihat yang berikut:

Buka fail SVG yang sama dalam editor teks dan anda akan melihat yang berikut:

Seperti yang ditunjukkan dalam contoh, dokumen SVG tidak lebih daripada fail teks biasa yang menggambarkan bentuk, garis, lengkung, warna, dan teks. Mereka boleh dibaca dan diedit oleh manusia dan boleh dikendalikan melalui CSS atau JavaScript. Ini menyediakan SVG dengan fleksibiliti dan fleksibiliti yang tidak dapat dipadankan dengan format imej PNG, GIF atau JPG tradisional.

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <circle cx="100" cy="100" r="80" stroke-width="4" stroke="#000" fill="yellow" />
</svg>

Bagaimana untuk membuat atau mengedit fail SVG?

Walaupun mungkin untuk membuat imej SVG mudah menggunakan mana -mana editor teks asas (seperti contoh di atas), kebanyakan SVG dibuat menggunakan aplikasi grafik vektor moden. Editor SVG popular termasuk:

• figma
• Adobe Illustrator
• boxy svg (murah)
• editor svg (percuma)

Berikut adalah contoh imej SVG biasa. Ilustrasi 60kb ini boleh digunakan dalam hampir semua persekitaran dalam talian. Sebagai vektor, kita dapat memastikan bahawa ia akan segera skala untuk memenuhi sebarang keperluan Viewport atau Unsur Lebar.

SVG dilahirkan pada tahun 1990 -an. Ia pada mulanya mempunyai sokongan yang buruk dan diabaikan untuk kebanyakan tahun 2000-an, tetapi perkara-perkara telah berubah sejak pertengahan tahun 2010. Semua pelayar web moden kini menjadikan SVG dengan sempurna, dan semua aplikasi lukisan profesional menawarkan pilihan eksport SVG. Walaupun grafik raster tradisional seperti JPG dan PNG masih lebih sesuai untuk imej foto, SVG sangat sesuai untuk memenuhi keperluan pembangunan web hari ini untuk skalabiliti, respons, interaktiviti, programmabiliti, prestasi, dan kebolehcapaian.

Apakah perbezaan antara kanvas SVG dan HTML5?

Kedua -dua teknologi ini sangat berbeza, tetapi soalan ini sering ditanya. Kami memecahkan kegunaan, kelebihan dan kekurangan setiap teknologi dalam SVG dan kanvas supaya anda boleh membuat pilihan yang tepat setiap kali.

Apakah kelebihan SVG?

Kelebihan SVG ialah ia dapat menyelesaikan banyak masalah yang paling sukar dalam pembangunan web moden. Mari kita lihat beberapa soalan ini.

1. Skalabiliti dan responsif

Jika anda memikirkannya dengan teliti, bentuk, laluan dan teks yang membentuk logo Nike adalah sama apabila anda menggambarkannya pada kad perniagaan standard atau pada logo bangunan gergasi yang tinggi 20 kaki. Hanya unit pengukuran yang telah berubah. SVG membolehkan anda membina imej yang anda dapat memastikan bahawa imej -imej ini tajam dan tajam pada saiz apa pun. Sebaliknya, format berasaskan piksel seperti GIF, JPG, dan PNG seperti menggunakan batu bata LEGO. Jika anda mahukan saiz dan butiran yang lebih besar, satu -satunya penyelesaian adalah untuk menambah lebih banyak blok. Walaupun pelbagai teknik imejan responsif telah terbukti berharga untuk grafik piksel, mereka tidak dapat bersaing dengan keupayaan SVG untuk berskala tak terhingga.

2. Programmability and Interactivity

Oleh kerana imej SVG terdiri daripada komponen berasingan (bentuk, garis, lengkung, dan teks), kami sentiasa bebas menggunakan skrip dan tingkah laku untuk mencari komponen ini. Pelbagai animasi dan interaksi boleh ditambah kepada grafik SVG dalam talian melalui CSS dan/atau JavaScript. Tidak ada cara yang setara untuk mencari elemen imej dalam JPG atau PNG.

3. Kebolehcapaian

Oleh kerana fail SVG berasaskan teks, maklumat yang terkandung di dalamnya selalu lebih mudah untuk mencari dan indeks daripada apa yang ada dalam imej piksel. Adakah ini bermakna bahawa SVG itu sendiri boleh diakses? Tidak SVGs yang tidak disediakan secara tidak mencukupi adalah tidak berguna seperti PNGs yang tidak sesuai. Walau bagaimanapun, data carta SVG lebih mudah diekstrak oleh pembaca skrin, enjin carian, dan perkhidmatan penggunaan teks lain daripada carta JPG yang setara.

4. Prestasi

Salah satu aspek yang paling penting yang mempengaruhi prestasi rangkaian ialah saiz fail yang digunakan di laman web. Jika disediakan dengan teliti, anda boleh menggunakan fail SVG yang agak kecil untuk memaparkan imej yang besar dan kompleks.

Apakah kegunaan terbaik untuk SVG?

SVG mempunyai banyak kes penggunaan praktikal. Mari kita bincangkan yang paling penting.

• ilustrasi dan carta

Mana -mana lukisan tradisional yang sesuai untuk membuat dengan pen dan pensil harus ditukar dengan sempurna ke format SVG. SVG sering digunakan untuk menyediakan corak bercetak 3D, karya seni Etsy, reka bentuk t-shirt, corak sulaman, dan juga bahan perancangan perkahwinan.

• Logo dan ikon

Logos dan ikon mesti tajam dan tajam dalam saiz apa -apa saiz butang atau saiz papan iklan -ini menjadikannya sesuai untuk SVGs. Di samping itu, ikon SVG lebih mudah untuk diakses dan lebih mudah dicari.

animasi
Anda boleh membuat animasi yang menarik dengan grafik SVG, termasuk kesan lukisan garis sejuk. Malah, kod SVG boleh berinteraksi dengan animasi CSS serta perpustakaan JavaScript dan ciri-ciri animasi smil terbina dalam mereka sendiri.

interaktif (carta, grafik, infographics, peta)

• SVG boleh digunakan untuk merancang data dan mengemas kini data secara dinamik berdasarkan tindakan pengguna atau peristiwa lain. Lihat infographic SVG interaktif dan peta perjalanan jalan interaktif SVG.

Kesan Khas

• SVG boleh digunakan untuk mencapai banyak kesan masa nyata, termasuk bentuk ubah bentuk atau kesan keletihan organik.

Membina antara muka dan aplikasi

• SVG membolehkan anda membuat komponen antara muka yang kompleks yang boleh diintegrasikan dengan HTML5, aplikasi berasaskan web, dan aplikasi Internet yang kaya (RIA).

Ringkasan

Sekarang anda tahu apa SVG dan mengapa mereka begitu baik untuk web. Seterusnya, saya cadangkan anda menyemak artikel Craig mengenai pelbagai kaedah menggunakan CSS dengan SVG, dan bagaimana untuk memasukkan dan beroperasi pada SVG dalam laman web. Atau, jika anda ingin menggali lebih mendalam, lihat buku SVG Praktikal oleh Chris Coyier.

(berikut adalah bahagian FAQ, yang telah ditulis semula dan diselaraskan mengikut teks asal untuk mengelakkan duplikasi)

soalan yang sering ditanya mengenai SVG (FAQ)

• Apakah kelebihan SVG berbanding dengan format imej lain seperti JPEG atau PNG? SVG mempunyai kelebihan resolusi tidak relevan, biasanya fail yang lebih kecil, dan operasi melalui CSS dan JavaScript.

• Bolehkah fail svg animasi? Ya, ia menyokong tiga kaedah animasi: SMIL, CSS dan JavaScript.

• Bagaimana untuk membuat imej SVG? Anda boleh menggunakan editor grafik vektor seperti Adobe Illustrator atau Inkscape atau menulis kod SVG secara langsung.

• Adakah fail SVG serasi dengan semua pelayar web? serasi dengan semua pelayar moden, tetapi versi lama IE mungkin tidak menyokongnya.

• Bolehkah imej SVG digunakan untuk mencetak? Ya, tetapi tidak semua kedai cetak menyokongnya.

• Bagaimana untuk mengoptimumkan fail SVG untuk prestasi yang lebih baik? boleh mengurangkan kod SVG, memudahkan bentuk, dll.

• Bolehkah fail SVG mengandungi hiperpautan? Ya.

• Bolehkah enjin carian indeks imej SVG? Ya, tetapi teks alternatif yang sesuai diperlukan.

• Bolehkah fail SVG mengandungi imej bitmap? Ya, tetapi ia akan meningkatkan saiz fail.

• Bolehkah imej SVG digunakan dalam e -mel? tidak disyorkan kerana pelanggan e -mel tidak menyokong SVG.

Atas ialah kandungan terperinci Apa itu SVG? Panduan anda untuk fail SVG. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!