CSS dengan SVG: Penggunaan Dunia Sebenar

svg: menyelam mendalam ke dalam gaya dan manipulasi dengan CSS

Grafik vektor berskala (SVG) adalah format imej vektor berasaskan XML yang sesuai untuk grafik web. Sokongannya untuk interaktiviti dan animasi, ditambah dengan keserasian penyemak imbas yang sangat baik (sejak IE9), menjadikannya alat yang kuat untuk pembangunan web moden. Artikel ini meneroka memanfaatkan CSS untuk gaya dan memanipulasi SVGs, meningkatkan kepelbagaian mereka dalam reka bentuk web.

Kelebihan utama SVG

• Skalabilitas: Tidak seperti imej raster (PNG, JPG, GIF), SVGS mengekalkan Crispness pada sebarang saiz, sesuai untuk logo dan ikon. Gaya CSS:
gaya secara langsung dan memanipulasi elemen SVG dalam DOM menggunakan CSS, membolehkan interaksi dinamik dan gaya yang konsisten merentasi pelbagai SVG.
• SVG Sprites:
Menyatukan pelbagai imej ke dalam satu fail, mengoptimumkan prestasi dengan mengurangkan permintaan HTTP dan meningkatkan caching.
• Ciri -ciri lanjutan:
Sokongan untuk animasi dan interaktiviti dalam fail SVG mandiri memperluaskan aplikasinya di luar grafik mudah. ​​
mengapa svgs outperform bitmaps

Format Bitmap Tentukan piksel warna imej dengan piksel. Imej kecil memerlukan beribu -ribu piksel, menghasilkan saiz fail yang lebih besar walaupun selepas mampatan. Membesarkan bitmaps membawa kepada pixelation.

SVGs, yang berasaskan vektor, menentukan imej menggunakan mata, garisan, dan lengkung. Ini menghasilkan saiz fail yang lebih kecil dan skalabiliti yang lebih baik. Sebagai contoh, bulatan mudah dalam SVG mungkin berada di bawah 150 bait berbanding dengan PNG atau JPG bersamaan yang lebih besar. Di samping itu, latar belakang SVG sememangnya telus. Struktur XML juga meningkatkan kebolehcapaian dan SEO.

alat penciptaan SVG

Walaupun memahami lukisan SVG asas adalah bermanfaat, alat khusus memudahkan membuat bentuk kompleks dan menghasilkan kod:

Komersial:

Adobe Illustrator, Pereka Affinity, Sketch
• Sumber terbuka:
Inkscape
• online (percuma/komersial):
pereka gravit, vectr, svg-edit, boxy svg, vecteezy
• perpustakaan carta:
menjana carta SVG dari data menggunakan JavaScript.
• alat seperti SVGO dan SVGOMG dapat mengoptimumkan kod SVG yang dijana untuk saiz fail yang lebih kecil.

menggunakan SVGs sebagai imej statik

dalam

Walau bagaimanapun, unsur -unsur interaktif dalam SVG dilumpuhkan. CSS transformasi dan penapis boleh digunakan, sering menghasilkan hasil yang lebih baik untuk skala bitmap. <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/" class="lazy" alt="CSS with SVG: Real World Usage ">

<code class="language-css">.myelement {
  background-image: url("mybackground.svg");
}</code>

latar belakang SVG yang digariskan dalam CSS

Inlining SVGs secara langsung dalam CSS kerana imej latar belakang adalah efisien untuk ikon kecil dan boleh diguna semula, mengelakkan permintaan HTTP tambahan:

<code class="language-css">.myelement {
  background-image: url("mybackground.svg");
}</code>

alat seperti plugin Aset Postcss menyelaraskan proses ini.

Imej SVG responsif

3

<svg></svg> kemudian gunakan CSS:

<code class="language-css">.mysvgbackground {
  background: url('data:image/svg+xml;utf8,<svg viewbox="0 0 800 600" xmlns="https://www.w3.org/2000/svg"><circle cx="400" cy="300" fill="#ff0" r="50" stroke="#f00" stroke-width="5"></circle></svg>') center center no-repeat;
}</code>

imej SVG yang ditetapkan html

<code class="language-html"><svg xmlns="https://www.w3.org/2000/svg" width="400" height="300"></svg></code>

membenamkan SVG terus ke HTML menjadikannya sebahagian daripada DOM, yang membolehkan manipulasi CSS dan JavaScript:

CSS kemudian boleh menyasarkan elemen SVG tertentu:

<code class="language-css">img {
  display: block;
  max-width: 100%;
  height: auto;
}</code>

Ini membolehkan gaya dinamik menggunakan

, peralihan, dan animasi.

<code class="language-html"><svg id="invader" xmlns="https://www.w3.org/2000/svg" viewbox="35.4 35.4 195.8 141.8">
  <path d="..."></path>
</svg></code>

:hover SVG Sprites: Pengurusan ikon yang cekap

menggabungkan pelbagai ikon ke dalam fail SVG tunggal menggunakan elemen:

Gunakan <symbol></symbol> unsur -unsur ke ikon rujukan dalam html:

<code class="language-css">#invader {
  width: 200px;
  height: auto;
}

#invader path {
  stroke-width: 0;
  fill: #080;
}</code>

Ini meningkatkan prestasi, tetapi memerlukan pengendalian yang teliti untuk keserasian silang penyemak imbas dan caching yang cekap. Teknik seperti pemuatan dan suntikan Ajax dapat menangani cabaran -cabaran ini. <use></use> Kesan SVG pada kandungan HTML (topeng, kliping, penapis)

<code class="language-xml"><svg>
  <defs>
    <symbol id="icon-folder" viewbox="0 0 32 32">...</symbol>
  </defs>
</svg></code>

Leverage CSS

,

, dan sifat untuk menggunakan kesan seperti pelekat, keratan, dan penapis visual kepada elemen SVG. Merujuk elemen SVG dalam CSS membolehkan manipulasi visual yang kompleks.

SVGs mandiri dengan interaktiviti tertanam mask clip-path filter Fail SVG mandiri boleh termasuk CSS, JavaScript, dan juga bitmaps, mewujudkan grafik interaktif yang serba lengkap. Ini membolehkan pengedaran kandungan interaktif tanpa bergantung pada sumber luaran.

Kesimpulan

SVG, digabungkan dengan CSS, memberikan pendekatan yang kuat dan cekap kepada grafik web. Fleksibilitasnya meluas dari imej statik mudah ke animasi interaktif yang kompleks, yang menawarkan banyak kemungkinan untuk meningkatkan reka bentuk web.

Atas ialah kandungan terperinci CSS dengan SVG: Penggunaan Dunia Sebenar. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!