Cara menambah grafik vektor berskala ke laman web anda

mata utama untuk aplikasi imej SVG

Artikel ini meringkaskan pelbagai cara untuk menambah imej SVG ke laman web, termasuk sekurang -kurangnya enam, salah satunya adalah untuk membenamkan kod SVG XML terus ke halaman HTML, dan yang lain menggunakan tag

. Dalam contoh ini, SVG adalah fail sumber tag IMG. <img src="/static/imghw/default1.png" data-src="https://img.php.cn/" class="lazy" alt="How to Add Scalable Vector Graphics to Your Web Page ">

Pertimbangan kebolehcapaian untuk imej SVG

Apabila menggunakan imej SVG, anda perlu memberi perhatian kepada aksesibiliti. Pertama, apabila menggunakan SVG dalam tag IMG, pastikan anda memasukkan atribut alt untuk menyediakan pengganti teks untuk pembaca skrin. Kedua, elemen tajuk dan DESC boleh digunakan dalam SVG untuk memberikan maklumat tajuk dan keterangan untuk grafik masing -masing. Contohnya:

Dalam contoh ini, SVG berjudul "Circle" dan digambarkan sebagai "pusingan hijau pada latar belakang kuning".

<svg>
  <title>圆形</title>
  <desc>黄色背景上的绿色圆形</desc>
  <circle cx="50" cy="50" fill="yellow" r="40" stroke="green" stroke-width="4"></circle>
</svg>

keserasian penyemak imbas imej SVG

imej SVG disokong oleh semua pelayar moden, termasuk Chrome, Firefox, Safari, dan Edge. Tetapi disyorkan untuk menguji imej SVG dalam pelbagai pelayar untuk memastikan ia memaparkan dengan betul.

Penggunaan imej SVG dalam reka bentuk web responsif

Imej SVG sesuai untuk reka bentuk web responsif. Oleh kerana ketidakpatuhan resolusinya, ia mengekalkan kualitinya tanpa mengira saiz atau resolusi skrin paparan. Dengan menggunakan harta ViewBox, anda dapat memastikan bahawa imej SVG diperkuat agar sesuai dengan bekasnya.

Atas ialah kandungan terperinci Cara menambah grafik vektor berskala ke laman web anda. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!