Simbol SVG 'Reskinnable': Cara Membuatnya (..dan mengapa)

Ikon SVG semakin digunakan dalam reka bentuk web moden, terima kasih kepada skalabilitas mereka, saiz fail kecil, dan keupayaan gaya CSS, menjadikannya sesuai untuk laman web responsif.

Walaupun SVG boleh digayakan menggunakan CSS, ini hanya berfungsi jika kod SVG tertanam dalam halaman HTML. Ini bermakna bahawa satu bahagian SVG tidak dapat diubah suai kecuali SVG tertanam.

Artikel ini memperkenalkan konsep "simbol SVG yang boleh ditanggalkan", di mana "rangka" imej SVG tetap tidak berubah, tetapi penampilan permukaan dapat dengan mudah diubah.

Artikel mencadangkan penyelesaian kepada masalah tidak dapat mengubah suai satu bahagian SVG. Ini melibatkan membuat simbol untuk setiap bentuk dalam SVG, setiap simbol dalam kotak viewbox yang sama, yang membolehkan gaya untuk setiap elemen yang diperlukan.

Butiran pengarang aliran kerja simbol SVG bangunan menggunakan Adobe Illustrator dan Gulp, dan nota bahawa kaedah ini serasi dengan semua pelayar moden.

Penggunaan SVG yang meluas di laman web moden telah meningkat dengan ketara pada tahun 2016, terima kasih kepada saiz fail, skalabilitas dan keupayaan gaya CSS.

Ia boleh digunakan dalam sistem ikon (lihat membina ikon SVG anda sendiri), walaupun fon ikon mungkin lebih baik dalam beberapa kes (lihat Icon Wars: Font dan SVG).

tetapi SVG juga boleh digunakan untuk logo atau elemen grafik (sekurang -kurangnya unsur -unsur tidak terlalu kompleks), dan fleksibiliti semulajadi menjadikannya penyelesaian yang sempurna untuk laman web responsif (lihat "Membuat SVG Responsif Sara Souce dengan CSS").

Menggunakan SVG boleh memanfaatkan CSS untuk mencari dan menukar saiz dan warna seluruh elemen, bagaimanapun, tidak mungkin untuk mengubah suai bahagian individu dengan cara ini kecuali kod SVG anda tertanam dalam halaman HTML.

Soalan

mari kita lihat contoh yang lebih mudah. Berikut adalah imej yang perlu kita paparkan dalam pelbagai warna.

Secara tradisinya, kita mencipta tiga imej berasingan -masing -masing dengan "gaya" yang berbeza. Tetapi bagaimana jika kita mahu menggunakan fail SVG tunggal dan gaya apabila rendering?

Juga, adakah cara untuk membuat imej kami menjadi "simbol SVG" untuk memanfaatkan cache penyemak imbas?

Saya menyebutnya "simbol SVG yang boleh berkulit" - "kerangka" imej SVG tetap sama, tetapi penampilan permukaan mudah berubah.

Penyelesaian yang ideal adalah untuk mengakses elemen simbolik melalui pemilih CSS dan menambah beberapa peraturan kepadanya (kaedah yang sama digunakan oleh SVG tertanam).

Dalam contoh di bawah, saya telah menambah kelas (atas, kanan, bawah dan kiri) ke setiap segitiga, mengatur imej sebagai simbol, dan cuba mengubahnya melalui CSS, seperti berikut:

.top { fill: #356BA5; }
.right { fill: #357FD9; }
/* and so on... */

Malangnya, pada masa ini ini hanya berfungsi untuk Firefox, seperti yang ditunjukkan dalam demonstrasi Codepen di bawah. Hanya pada Firefox akan imej kedua muncul dalam warna biru (saya membenamkan kod simbolik dalam pena untuk kemudahan, tetapi menggunakan fail SVG luaran akan mendapat hasil yang sama).

codepen link 1

codepen link 2

Dalam projek -projek besar, kami mungkin mempunyai banyak elemen sedemikian, dan isu penyelenggaraan adalah faktor penting, jadi saya sentiasa mencari cara untuk mengatur sumber projek yang lebih baik.

Matlamat saya adalah penyelesaian CSS tulen: Contoh sebelumnya boleh ditulis semula menggunakan SVG segitiga tunggal, yang boleh diputar, dipindahkan, dan teduh melalui CSS.

Tetapi saya tidak suka penyelesaian ini: nampaknya saya hanya mengalihkan masalah dan tidak menyelesaikan masalah. Berapa banyak komponen logo dunia sebenar yang mempunyai bentuk yang sama?

Sara Soueidan menerangkan masalah ini lebih baik daripada yang saya lakukan dan memberikan kita penyelesaian pintar untuk menggunakan pembolehubah CSS. Malangnya, pembolehubah CSS masih merupakan teknik eksperimen dan pelayar Microsoft tidak menyokong mereka.

Penyelesaian

Seperti yang sering berlaku, penyelesaiannya sangat mudah sehingga anda akan merasa bodoh kerana anda tidak mengharapkannya sebelum ini.

Saya dapati beberapa bulan yang lalu apabila saya melihat logo sederhana baru (nampaknya seperti Medium telah mengubah kod logo mereka - anda perlu mempercayai saya).

anda dapat melihat bahawa logo sederhana terdiri daripada empat "bentuk", masing -masing dipenuhi dengan warna pepejal yang berbeza. Versi hitam dan putih adalah sama dengan versi hijau (kecuali warna tentu saja).

Penyelesaian untuk memiliki kedua -dua versi fail tunggal adalah dengan hanya membina simbol untuk setiap bentuk, setiap simbol dalam

viewbox yang sama.

mari kita memohon kepada contoh kita dan buat simbol untuk setiap bentuk dalam imej. Mereka semua berkongsi viewbox yang sama (0 0 54 54) dari keseluruhan imej, jadi mereka diletakkan di kedudukan yang betul tanpa sebarang arahan tambahan. Hanya berhati -hati untuk mengelakkan penggunaan, strok, gaya dan atribut lain dalam kod simbol).

<svg xmlns="https://www.w3.org/2000/svg">
    <symbol id="top" viewBox="0 0 54 54">
        <polygon points="54 0 0 0 27 27 54 0"></polygon>
    </symbol>
    <symbol id="right" viewBox="0 0 54 54">
        <polygon points="54 54 54 0 27 27 54 54"></polygon>
    </symbol>
    <symbol id="bottom" viewBox="0 0 54 54">
        <polygon points="0 54 54 54 27 27 0 54"></polygon>
    </symbol>
    <symbol id="left" viewBox="0 0 54 54">
        <polygon points="0 0 0 54 27 27 0 0"></polygon>
    </symbol>
</svg>

sekarang kita dapat menggabungkannya ke dalam satu bekas SVG:

<svg>
    <use class="top" xlink:href="#top"></use>
    <use class="right" xlink:href="#right"></use>
    <use class="bottom" xlink:href="#bottom"></use>
    <use class="left" xlink:href="#left"></use>
</svg>

Setiap elemen penggunaan boleh digayakan seperti yang diperlukan, dan yang paling penting, ia serasi dengan semua pelayar moden:

codepen link 3

itu sahaja.

Kami hanya perlu mengatur fail SVG kami seperti ini. Sudah tentu, kita boleh melakukannya secara manual, tetapi jika anda perlu menguruskan banyak elemen grafik, atau jika anda perlu dengan cepat mengedit dan menggunakannya semula dalam lebih banyak projek, anda memerlukan alur kerja yang lebih bijak dan lebih cepat. Saya telah menemui penyelesaian menggunakan Adobe Illustrator dan beberapa Gulp.

simbol simbol pembinaan aliran kerja

Prinsip teknik ini adalah sama seperti yang saya diperkenalkan dalam artikel "Membina ikon SVG anda sendiri" dan "Buat fon ikon dengan Illustrator dan Icomoon", jadi periksa mereka untuk langkah pertama.

Katakan kita mempunyai dua elemen, sama seperti imej di bawah. Setiap elemen diatur dalam papan artom tertentu:

Untuk kemudahan, kami telah menambah beberapa warna kepada mereka, walaupun kita tahu bahawa warna mengisi (dan jika ada, warna strok, saiz strok, dll) akan diedit melalui CSS.

Oleh kerana setiap simbol mesti mempunyai papan artinya, kita kini perlu segmen setiap imej ke dalam seberapa banyak papan arten sebagai setiap bahagian berwarna.

Ini boleh dilakukan dengan sangat cepat dalam Illustrator, memotong setiap elemen, memilih papan artak sasaran dan memilih tampal di tempat.

Perhatikan bahawa setiap papan arten mempunyai nama tertentu: ia akan digunakan untuk ID simbolik.

Sekarang kita boleh mengeksport papan arten kami sebagai SVG menggunakan perintah "Eksport → Eksport sebagai Skrin" jenama baru.

Ini adalah alat baru yang sangat berguna untuk versi Illustrator terkini: ia membolehkan anda menyimpan setiap papan artboard atau sumber pengguna dalam pelbagai format menggunakan satu arahan.

pilih "Artboard" dari panel eksport, tetapkan "SVG" ke format output, dan pilih folder sasaran:

Setiap papan arten akan dieksport sebagai fail SVG tunggal:

Sekarang kita perlu menggabungkan semua fail ke dalam simbol SVG dan mengeluarkan beberapa sifat SVG yang tidak diingini: Skrip Gulp kecil akan membantu kita melakukan ini dengan cepat.

menggunakan gulp

Bahagian seterusnya adalah sedikit teknikal, tetapi - jika anda lebih suka - ia akan memberi anda cara yang cepat dan ringkas untuk menjana SVG serba boleh. Saya telah menulis tentang Gulp di SitePoint, dan anda juga boleh mencari banyak sumber dalam talian mengenai pemasangan Gulp dan semua parameter yang berkaitan, jadi saya mengandaikan anda telah memasangnya dan anda tahu apa yang kita bicarakan.

Bagaimanapun, jika anda tidak suka Gulp, anda juga boleh menyelesaikan semua langkah berikut secara manual. Saya telah melakukan ini beberapa kali sebelum saya mula menggunakan Gulp: ini pasti cara yang baik untuk belajar, dan ia cukup untuk projek -projek kecil atau tempat di mana tidak ada keperluan untuk penyuntingan dan penyelenggaraan berterusan.

jadi kami mempunyai beberapa fail SVG, masing -masing disusun seperti contoh di bawah (attribute telah dipendekkan untuk kemudahan):

.top { fill: #356BA5; }
.right { fill: #357FD9; }
/* and so on... */

Matlamat kami adalah untuk mengatur semua imej ke dalam simbol SVG dalam satu fail sambil mengeluarkan semua sifat yang tidak diingini:

<svg xmlns="https://www.w3.org/2000/svg">
    <symbol id="top" viewBox="0 0 54 54">
        <polygon points="54 0 0 0 27 27 54 0"></polygon>
    </symbol>
    <symbol id="right" viewBox="0 0 54 54">
        <polygon points="54 54 54 0 27 27 54 54"></polygon>
    </symbol>
    <symbol id="bottom" viewBox="0 0 54 54">
        <polygon points="0 54 54 54 27 27 0 54"></polygon>
    </symbol>
    <symbol id="left" viewBox="0 0 54 54">
        <polygon points="0 0 0 54 27 27 0 0"></polygon>
    </symbol>
</svg>

Selain daripada Gulp, kerja kami memerlukan beberapa sambungan lain:

• Pertama sekali, gulp-svgstore dan gulp-svgmin digunakan untuk menggabungkan dan memampatkan fail SVG kami
• Gulp-Rename digunakan untuk menyesuaikan nama ID dan tentukan nama untuk fail sasaran kami. Modul ini amat diperlukan jika anda ingin menggunakan arahan eksport SVG Illustrator sebelumnya, yang akan kami sampaikan kemudian.

sekarang kita boleh mengatur gulpfile kita (kod itu juga boleh diperolehi sebagai intipati awam):

<svg>
    <use class="top" xlink:href="#top"></use>
    <use class="right" xlink:href="#right"></use>
    <use class="bottom" xlink:href="#bottom"></use>
    <use class="left" xlink:href="#left"></use>
</svg>

Selepas memuatkan modul, kami mengarahkan fail untuk menghuraikan (svg_files/*. Svg).

SVGStore menggunakan nama setiap fail untuk menetapkan atribut ID simbol (iaitu, fail bernama Umbrella.svg akan menjadi simbol dengan id="umbrella"). Jika anda menggunakan Eksport Illustrator baru sebagai panel skrin, anda boleh mengelakkan perintah nama semula pertama , kerana fail anda akan dinamakan sama persis dengan papan seni yang mereka milik.

Tetapi versi lama Illustrator mencipta nama fail dengan menyambungkan nama fail ilustrator dengan nama artboard, jadi kita perlu menamakan semula fail untuk mengalih keluar awalan nama fail ilustrator:

<svg id="Layer_1" data-name="Layer 1" xmlns="https://www.w3.org/2000/svg" width="54" height="54" viewBox="0 0 54 54">
<title>umbrella-handle</title>
<path d="..." fill="#603813"></path>
</svg>

Sekarang kita boleh membersihkan fail kita. Gulp-Svgmin adalah versi SVGO, "alat berdasarkan NodeJs untuk mengoptimumkan fail grafik vektor SVG" (Jake Archibald telah mengeluarkan versi SVGO dalam talian, yang sangat berguna jika anda ingin mengatur fail secara manual).

SVGO mempunyai banyak pilihan yang boleh dikonfigurasikan (anda boleh melayari semuanya dalam halaman projek), tetapi kami hanya memerlukan beberapa (tentu saja, anda boleh menyesuaikan skrip yang anda mahukan):

• CleanupIDs: Keluarkan semua ID dari fail
• RemovedOctype, RemoveComments, dan RemoveStyleLement: Keluarkan semua pengisytiharan jenis dokumen, komen dan <style></style> elemen
• Removedimensions: Jika kotak pandangan wujud, semua sifat lebar dan ketinggian dipadam
• cleanupnumericvalues: bulat nilai ke tahap ketepatan yang munasabah
• membuang: Keluarkan semua atribut yang ditentukan

Seterusnya, lulus fail ke SVGStore untuk menggabungkan ke dalam fail yang unik, kemudian namakan semula dan simpan.

Selepas menggunakannya beberapa kali, anda sepatutnya dapat menjadualkannya untuk setiap projek dalam beberapa minit, dan ia akan membolehkan anda dengan cepat membina semula fail simbol SVG anda jika anda memerlukannya.

Berikut adalah contoh hasil (walaupun dalam pen ini saya telah memasukkan fail SVG untuk kemudahan, tetapi anda boleh menghubungkannya dengan selamat sebagai fail luaran):

codepen link 4

Adakah terdapat amaran?

Oleh kerana kaedah ini didasarkan pada elemen penggunaan gaya, kita mempunyai masalah apabila polyfills (seperti svg4everybody) memadamnya.

dalam pelayar yang tidak menyokong pautan simbolik luaran (semua IES), svg4everybody menggantikan semua elemen penggunaan dengan kandungan simbol yang sepadan. Oleh itu, semua peraturan CSS yang digunakan untuk digunakan tidak akan berkuatkuasa.

Ini boleh diselesaikan dengan menyesuaikan pemilih CSS agar sesuai dengan elemen simbolik dalaman (jalan, bulatan, dan lain -lain), tetapi ini boleh menjadi agak rumit.

bonus keluar

Terdapat variasi tanpa had aliran kerja ini: anda boleh mengendalikan strok, teks, dan banyak lagi.

Satu lagi ciri menarik yang patut diterokai ialah penggunaan simbol ilustrator: mereka dieksport sebagai simbol SVG, yang membawa banyak kemungkinan.

Terima kasih kerana membaca.

soalan yang sering ditanya mengenai simbol SVG yang boleh dikendalikan

Apakah kelebihan menggunakan simbol SVG dan bukannya format imej lain untuk reka bentuk web?

simbol SVG mempunyai banyak kelebihan berbanding format imej lain seperti JPEG, PNG atau GIF. Pertama, SVGs adalah grafik vektor berskala, bermakna mereka boleh diubah saiz tanpa kehilangan kualiti. Ini amat berguna untuk reka bentuk web yang responsif, di mana imej yang sama perlu dipaparkan pada peranti yang berbeza pada saiz yang berbeza. Kedua, simbol SVG boleh digayakan menggunakan CSS, dengan itu meningkatkan fleksibiliti reka bentuk. Akhirnya, saiz fail SVG biasanya lebih kecil daripada rakan bitmapnya, yang boleh mempercepat pemuatan dan meningkatkan prestasi laman web.

Bagaimana untuk mengubahsuai warna simbol SVG?

Anda boleh menggunakan CSS untuk mengubah warna simbol SVG. Secara lalai, SVG mewarisi warna elemen induknya. Walau bagaimanapun, anda boleh mengatasi tetapan ini dengan meletakkan SVG atau elemen anaknya dalam CSS dan menggunakan warna yang dikehendaki. Sebagai contoh, anda boleh menggunakan atribut

untuk menukar warna di dalam SVG, atau menggunakan atribut fill untuk menukar warna garis besarnya. stroke

Bolehkah saya menggunakan simbol SVG dalam semua pelayar web?

Simbol SVG disokong secara meluas dalam semua pelayar web moden termasuk Chrome, Firefox, Safari, dan Edge. Walau bagaimanapun, versi lama Internet Explorer (IE8 dan ke bawah) tidak menyokong SVG. Jika anda perlu menyokong pelayar yang lebih tua ini, anda mungkin perlu menyediakan imej PNG atau JPEG sebagai sandaran.

bagaimana menghidupkan simbol SVG?

Simbol SVG boleh animasi menggunakan animasi CSS atau JavaScript. Animasi CSS lebih mudah dan lebih baik, tetapi JavaScript menawarkan lebih banyak kawalan dan fleksibiliti. Anda boleh menghidupkan pelbagai sifat SVG seperti kedudukan, saiz, putaran, warna, dan kelegapan.

Bolehkah saya menggunakan simbol SVG dalam html?

Ya, simbol SVG boleh dibenamkan terus ke HTML. Ini boleh dilakukan dengan menggunakan tag

dan <svg></svg>. Tag <symbol></symbol> digunakan untuk menentukan simbol SVG, dan tag <symbol></symbol> digunakan untuk menegaskannya. Ini membolehkan anda menentukan simbol SVG sekaligus dan menggunakannya semula beberapa kali sepanjang HTML. <use></use>

bagaimana menjadikan simbol SVG saya lebih mudah diakses?

Untuk menjadikan simbol SVG anda lebih mudah diakses, anda harus menggunakan tag

dan <title></title> dalam SVG untuk menyediakan teks alternatif. Tag <desc></desc> memberikan tajuk deskriptif pendek untuk SVG, dan tag <title></title> memberikan penerangan yang lebih panjang. Tag ini dibaca oleh pembaca skrin dan memberikan konteks penting untuk pengguna cacat penglihatan. <desc></desc>

Bolehkah saya menggunakan simbol SVG dalam CSS?

Ya, simbol SVG boleh digunakan sebagai imej latar belakang dalam CSS. Ini boleh dilakukan dengan mengekodkan SVG sebagai URL data dan menggunakannya sebagai nilai atribut background-image. Walau bagaimanapun, kaedah ini tidak membolehkan anda gaya atau menghidupkan SVG dengan CSS.

Bagaimana untuk mengoptimumkan simbol SVG saya untuk prestasi?

Terdapat beberapa cara untuk mengoptimumkan simbol SVG anda untuk prestasi. Pertama, anda boleh memampatkan kod SVG untuk mengurangkan saiz failnya. Kedua, anda boleh menggunakan mampatan GZIP untuk mengurangkan saiz fail. Akhirnya, anda boleh menggunakan HTTP/2 untuk melayani SVG anda, yang membolehkan pemindahan data yang lebih cepat dan lebih cekap.

Bolehkah saya menggunakan simbol SVG dalam JavaScript?

Ya, simbol SVG boleh dikendalikan di JavaScript. Ini membolehkan anda mengubah sifat -sifat SVG secara dinamik, seperti warna, saiz, lokasi, dan penglihatannya. Anda juga boleh menggunakan JavaScript untuk menghidupkan SVGs, membuat SVG interaktif, dan memuat SVG secara dinamik.

Bagaimana untuk membuat simbol SVG responsif?

Untuk mewujudkan simbol SVG yang responsif, anda harus menggunakan unit relatif (seperti peratusan) untuk lebar dan ketinggian SVG, bukannya unit mutlak (seperti piksel). Ini membolehkan SVG skala dengan elemen induknya. Anda juga boleh menggunakan atribut viewBox untuk menentukan nisbah aspek dan menyelaraskan sistem SVG, yang membolehkannya skala untuk skala.

Atas ialah kandungan terperinci Simbol SVG 'Reskinnable': Cara Membuatnya (..dan mengapa). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!