Artikel Pengenalan Wulin.com (www.vevb.com): Nama lengkap SVG adalah grafik vektor yang dapat diskalakan. Jika Anda menggunakan Adobe Illustrator, saya yakin Anda tidak terbiasa dengan format gambar yang sesuai ini!
Sebelum kita mulai menggunakan SVG, mari kita lihat SVG terlebih dahulu dan jelaskan mengapa kita menggunakan SVG.
Nama lengkap SVG adalah grafik vektor yang dapat diskalakan. Jika Anda menggunakan Adobe Illustrator, saya yakin Anda tidak terbiasa dengan format gambar yang sesuai ini!
Mengapa Menggunakan SVG? Dukungan BrowserJika Anda perlu mendukung versi browser ini, Anda dapat menggunakan Modernizr sebagai berikut:
if (! modernizr.svg) {
$ (. Gblogo IMG) .attr (SRC, Images/Logo.png);
}
Atau gunakan kode sederhana berikut:
<img src = gblogo.svg onError = this.onError = null; this.src = gblogo.png>
File SVG digunakan sebagai gambar umumAnda dapat menggunakannya secara langsung sebagai gambar, sebagai berikut:
<img src = logo.svg href = class = logo>
csswang.com
</a>
Kode CSS:
.logo {
menampilkan:
Teks-inden:
lebar:
tinggi:
latar belakang:
Ukuran latar belakang:
}
Menggunakan SVG in-lineAnda dapat menyalin kode SVG langsung ke dalam tubuh dan Anda akan melihat gambar, sebagai berikut:
<body>
<!-Salin kode SVG di sini dan gambar akan ditampilkan->
</body>
Kontrol SVG dengan CSSAnda dapat menggunakan CSS untuk mengontrol file SVG. Kode berikut akan mengontrol warna latar belakang gambar saat mouse ditangguhkan:
<g class = logo transform = translate (0,000000.500.000000) Skala (0,100000, -0.100000)
isi =#00000 stroke = tidak ada>
Kode di atas mendefinisikan kelas logo, dan kita dapat mendefinisikannya dalam CSS sebagai berikut:
.logo: hover {
mengisi:
...
}
Perhatikan bahwa di SVG kami menggunakan isi alih -alih latar belakang untuk menentukan warna latar belakang.
Anda bahkan dapat menggunakan filter untuk mengontrol ambiguitas, sebagai berikut:
.logo: hover {
mengisi:
menyaring:
}
Saat Anda menggunakan mouse untuk mengarahkan gambar, efek berikut akan.
Debugging online:
Ringkasan Alat Terkait SVGSVG adalah format gambar yang sangat kuat yang dapat membantu Anda memproses gambar secara efisien dan memiliki metode tampilan grafis yang lebih fleksibel dan kuat daripada JPG atau PNG. Saya percaya bahwa jika diterapkan pada waktunya, itu pasti akan menjadi metode pemrosesan gambar paling populer!