Tentukan nama kelas CSS di jalur SVG menggunakan Illustrator

Apakah ada cara untuk mengedit file SVG di Illustrator di mana Anda dapat menentukan kelas CSS untuk setiap jalur?

Saya sudah tahu di Illustrator bahwa jika Anda memberi nama layer nama yang sebenarnya, Illustrator akan menggunakan nama itu sebagai path ID, yang tidak masalah jika Anda tidak berencana untuk menggunakan kembali ikon lebih dari satu kali di halaman yang sama.

Solusi saya saat ini adalah dengan hanya menggunakan metode ID, tetapi kemudian mengonversi ID ke kelas di editor kode saya, tapi itu cukup menjengkelkan harus dilakukan setiap kali saya menghasilkan sprite SVG saya.

Jika saat ini tidak memungkinkan di Illustrator, apakah ada aplikasi lain yang memungkinkan Anda menentukannya? Atau mungkin paket Grunt atau Gulp?

Sepertinya Anda mungkin dapat melakukannya dengan Inkscape dengan peretasan , jadi saya mungkin melihat itu jika tidak ada solusi bagus lainnya di luar sana.

Saya melakukan ini dengan tugas Grunt. Dengan menggunakan "grunt-text-replace" saya dapat melewati SVG minified saya (svgmin) melalui ekspresi reguler kustom yang menggantikan semua referensi kelas yang kacau dengan kelas yang tepat.

Di Illustrator, deklarasikan layer / nama objek sebagai class = "tree" misalnya. Ini akan diekspor oleh Illustrator sebagai id = "class =" tree "" . Tugas kasar di bawah ini akan membereskannya dan menjadikannya class = "tree" . Saya juga menempel di bawah beberapa subtugas lain yang akan melakukan pembersihan ID (disarankan).

    replace: {
        // ID cleanup: performs a manual ID cleanup as Illustrator exports a mess
        illustrator: {
            src: ['assets/svg/optimised/*.svg'],
            overwrite: true,
            replacements: [{
                // Remove escaped underscore character
                from: '_x5F_',
                to: '_'
            }, {
                // Replace class names with proper classes
                //class_x3D__x22_tank-option_x22__2_
                from: /id\=\"class_x3D__x22_(.+?)_x22_(.*?)\"/gi,
                to: function(matchedWord, index, fullText, regexMatches) {
                    return 'class="'+ regexMatches[0].toLowerCase()+'"';
                }
            }, {
                // Lowercase all ids
                from: /id\=\"(.+?)\"/gi,
                to: function(matchedWord, index, fullText, regexMatches) {
                    return 'id="'+ regexMatches[0].toLowerCase()+'"';
                }
            }, {
                // Lowercase all id references to match the previous replace rule
                from: /url\(\#(.+?)\)/gi,
                to: function(matchedWord, index, fullText, regexMatches) {
                    return 'url(#'+ regexMatches[0].toLowerCase() +')';
                }
            }, {
                // Lowercase all id href to match the previous replace rule
                from: /href\=\"\#(.+?)\"/gi,
                to: function(matchedWord, index, fullText, regexMatches) {
                    return 'href="#'+ regexMatches[0].toLowerCase() +'"';
                }
            }, {
                // Remove all font references as we will use CSS for this
                from: /font\-family\=\"(.+?)\"/gi,
                to: function(matchedWord, index, fullText, regexMatches) {
                    return '';
                }
            }]
        }
    }

Kemudian Anda dapat memanggil tugas ini dalam Gruntfile Anda sebagai:

grunt.registerTask('svgclean', [
    'replace:illustrator'
]);

Sepertinya tautan yang dipasang Ian Dunn mungkin adalah tiket Anda. Berikut kutipan dari halaman itu :

Dalam opsi ekspor SVG, saya memilih Elemen Gaya, dan saya memilih opsi Sertakan Gaya Grafis Tidak Terpakai. Ini akan mendeklarasikan sandStyle dan blueSky sebagai gaya CSS dalam dokumen SVG.

Berikut ini adalah keluaran SVG yang dihasilkan oleh Illustrator CC:
<style type="text/css"> .sandStyle{fill:#BFAF8F;stroke:#A6806A;stroke-width:3;stroke-miterlimit:10;} .blueSky{fill:#338AC4;stroke:#3469B7;stroke-width:3;stroke-miterlimit:10;} </style> <g id="mySquare"> <rect x="90.5" y="15.5" class="sandStyle" width="64" height="63"/> </g> <g id="myCircle"> <circle class="sandStyle" cx="42" cy="46" r="34.2"/> </g>

Illustrator dapat mengekspor gaya grafis sebagai CSS dalam elemen gaya dan menerapkannya melalui kelas dalam kode SVG. Ini adalah bagaimana Anda dapat menghasilkan kelas dalam SVG yang diekspor. Bergantung pada apa yang ingin Anda lakukan untuk kelas-kelas itu, Anda bisa mendefinisikannya di file CSS lain dan menghapus definisi gaya dari SVG yang diekspor.

Halaman tertaut menyatakan ini, tetapi demi kelengkapan, Illustrator hanya akan menghasilkan elemen gaya dan kelas jika Anda mengatur CSS Properties: Style Elementdi area Advanced (Anda mungkin perlu mengklik More Options) dari Dialog Opsi SVG:

Saya juga mencatat bahwa kode yang dihasilkan tidak akan pernah cukup sempurna untuk semua situasi. Kode tulisan tangan cenderung lebih ringan dan lebih mudah dibaca manusia (jika memang itu yang Anda inginkan). Saya akan merekomendasikan membaca dokumen Quibik pengguna Wikimedia tentang membersihkan file SVG dengan tangan dan melihat grunt-svgmin .

Saya baru saja mengalami masalah ini dan menemukan solusi berikut (untuk Illustrator CC):

Terapkan bernama "Gaya Grafis" ke jalur yang ingin Anda beri nama dan ekspor SVG dengan CSS Internal. Sebagai contoh, Gaya Grafis bernama ikon saya akan menentukan my-iconkelas internal dan menerapkan kelas itu ke jalur yang benar.

Contoh dengan tangkapan layar:

Buat Gaya Grafis baru:

Ekspor sebagai ... SVG:

Keluaran:

<defs><style>.my-icon{ fill:#000; }</style></defs> <path class="my-icon">...</path>

Sumber: https://www.viget.com/articles/5-tips-for-saving-svg-for-the-web-with-illustrator

5. Gunakan Pengaturan Properti CSS yang Tepat (kebahagiaan dev)

CC: ilustrator menggunakan Gaya Grafis yang didefinisikan untuk membuat kelas bernama (pintar, berguna)

Di Illustrator 21.0.0 (2017) dan mungkin di versi sebelumnya:

1. Buat gaya baru di panel Gaya Grafis
2. Klik dua kali gaya baru dan berikan nama khusus, seperti "gaya saya"
3. Terapkan gaya itu ke satu elemen atau lebih
4. Ekspor SVG

Elemen-elemen dalam SVG akan diberi atribut class dengan nilai "my-style". Kemudian Anda dapat menggunakan CSS eksternal untuk mengganti gaya.

Perhatikan bahwa jika nama gaya Anda berisi spasi, itu akan dikonversi menjadi tanda hubung.

Cara sederhana untuk melakukannya, ini mirip dengan tugas Grunt, tetapi bahkan lebih mudah:

Untuk semua objek yang ingin Anda buat kelas, beri nama misalnya: "myClassmainCircle" dan "myClassmainStar". Setelah mengekspor ganti semua: 'id = "myClass' dengan 'class ="'

Hasilnya adalah: class = "mainCirle" class = "mainStar"