Tiga cara mengurangkan saiz fail SVG dengan SVGO

Artikel ini meneroka tiga kaedah untuk mengoptimumkan grafik SVG menggunakan SVGO, alat yang popular untuk mengurangkan saiz fail dan meningkatkan prestasi laman web. SVGO cemerlang dalam menghilangkan markup yang tidak perlu, memudahkan laluan, dan menghapuskan kembung dari SVG yang sering dibuat dengan perisian reka bentuk yang tidak dioptimumkan untuk kegunaan web.

Manfaat utama pengoptimuman SVG:

mengurangkan saiz fail, yang membawa kepada masa pemuatan laman web yang lebih cepat.
Meningkatkan prestasi laman web dan pengalaman pengguna.
Membuat kod SVG yang lebih bersih dan lebih cekap.

Mengapa mengoptimumkan svgs?

Walaupun SVG menawarkan kebebasan berskala dan resolusi, mereka sering mengandungi data yang tidak perlu (komen, laluan kompleks, dan lain -lain) yang mengembang saiz fail. Hal ini terutama berlaku untuk SVGS yang diperoleh daripada program reka bentuk atau sumber kreatif Commons. Malah SVG yang dibuat sendiri boleh mendapat manfaat daripada pengoptimuman untuk menghapuskan metadata khusus editor.

Contoh kod yang tidak dioptimumkan dan dioptimumkan:

Unoptimized:

<svg xmlns:rdf="https://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="https://www.w3.org/2000/svg" xmlns="https://www.w3.org/2000/svg" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" viewBox="0 0 1000 1000" version="1.1">
  <g inkscape:label="Katze" inkscape:groupmode="layer" id="layer1" transform="translate(0,-52.362183)"></g>
  ... More code here ...
</svg>

Dioptimumkan:

<svg xmlns="https://www.w3.org/2000/svg" viewBox="0 0 1000 1000">
  <g id="layer1" transform="translate(0,-52.362183)"></g>
  ... More code here ...
</svg>

Walaupun pembersihan manual mungkin, SVGO mengautomasikan proses ini dengan berkesan.

tiga cara untuk menggunakan svgo:

1. node.js dan svgo: Pasang node.js dan npm, kemudian pasang SVGO secara global (). Mengoptimumkan fail menggunakan npm install -g svgo untuk membuat salinan yang dioptimumkan tanpa menimpa asal. Proses pelbagai fail dengan bendera svgo yoursvgfile.svg yoursvgfile.min.svg, dan menyesuaikan pengoptimuman dengan plugin (mis., ). -f svgo yoursvgfile.svg --enable='removeComments,mergePaths'

2. Integrasi Gulp:

   Gunakan dalam aliran kerja Gulp untuk pengoptimuman automatik. Ini mengintegrasikan dengan lancar ke dalam proses membina depan yang sedia ada. gulp-svgmin

3. SVGOMG (Online GUI):

   Antara muka web mesra pengguna (SVGOMG) menyediakan pratonton masa nyata, membolehkan anda memantau kesan pengoptimuman dan mengelakkan tetapan yang terlalu agresif yang mungkin merendahkan kualiti imej.

Kesimpulan:

SVGO menawarkan pelbagai pendekatan untuk mengoptimumkan SVGs, meningkatkan prestasi laman web dan kebersihan kod. Pilih kaedah yang paling sesuai untuk aliran kerja anda, sama ada kecekapan baris arahan, tugas-tugas Gulp automatik, atau maklum balas visual SVGOMG. Ingatlah bahawa pengoptimuman yang bertanggungjawab mengimbangi pengurangan saiz fail dengan mengekalkan kualiti imej.

(bahagian Soalan Lazim yang ditinggalkan untuk keringkasan, tetapi boleh ditambah semula berdasarkan keperluan. Maklumat sudah ada dalam teks asal.)

Atas ialah kandungan terperinci Tiga cara mengurangkan saiz fail SVG dengan SVGO. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!