Illustrator'ı kullanarak SVG yollarında CSS sınıfı adlarını belirtin


21

Illustrator'da her yol için bir CSS sınıfı belirtebileceğiniz SVG dosyalarını düzenlemenin bir yolu var mı?

Illustrator'da zaten katman adına gerçek bir ad verirseniz, Illustrator uygulamasının bu adı yolun kimliği olarak kullanacağını biliyorum; bu simgeyi aynı sayfada birden çok kez yeniden kullanmayı planlamıyorsanız sorun değil.

Mevcut geçici çözümüm yalnızca IDs yöntemini kullanmak, ancak daha sonra ID'leri kod editörümdeki sınıflara dönüştürmek, ancak SVG sprite'mı her oluşturduğumda yapmak çok can sıkıcı.

Illustrator'da şu anda mümkün değilse, bunu belirtmenize izin verecek başka uygulamalar var mı? Ya da belki bir Grunt veya Gulp paketi?

Görünüşe göre Inkscape ile kesmek mümkün olabilir , bu yüzden dışarıda başka iyi bir çözüm yoksa, ben bakabilirim.


Illustrator'ı kimlikleri veya sınıfları ile dışa aktaramam. Yine de SVG'leri kodlamayı tercih ediyorum, sesler kadar garip ve çok etkili değil. Biliyorum, kullandığınız illüstratör sürümünü ekleyebilir misiniz?
Daniel

Adobe Illustrator CC sürüm 17.1.0 kullanıyorum
NerdCowboy

Yanıtlar:


5

Bunu bir Grunt görevi ile yapıyorum. "Grunt-text-replace" kullanarak küçültülmüş SVG'lerimi (svgmin), tüm bozuk sınıf referanslarını uygun sınıflarla değiştiren özel bir normal ifadeden geçirebilirim.

Illustrator'da, örneğin katman / nesne adını class = "tree" olarak bildirin. Bu Illustrator tarafından id = "class =" tree "" olarak dışa aktarılır . Aşağıdaki homurdanan görev bununla ilgilenecek ve bunu class = "tree" yapacaktır . Ayrıca bir ID temizliği yapacak başka bazı alt görevlerin altına yapıyorum (önerilen).

    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 '';
                }
            }]
        }
    }

Daha sonra bu görevi Gruntfile içinde şu şekilde çağırabilirsin:

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

7

Görünüşe göre Ian Dunn tarafından gönderilen bağlantı biletin olabilir. İşte o sayfadan bir bölüm :

SVG dışa aktarma seçeneklerinde Stil Öğeleri'ni ve Kullanılmayan Grafik Stillerini Dahil Et seçeneklerini seçtim. SandStyle ve blueSky'yi SVG belgesinde CSS stilleri olarak ilan edecektir.

Illustrator CC tarafından oluşturulan SVG çıktısı:
<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, stil öğelerinde grafik stillerini CSS olarak dışa aktarabilir ve bunları SVG kodundaki sınıflar aracılığıyla uygular. Dışa aktarılan SVG'nizde sınıfları bu şekilde oluşturabilirsiniz. Bu sınıfların ne yapmasını istediğinize bağlı olarak, onları başka bir CSS dosyasında tanımlayabilir ve stil tanımlarını dışa aktarılan SVG'den kaldırabilirsiniz.

Bağlantılı sayfa bunu belirtir, ancak eksiksiz olması için, Illustrator yalnızca SVG Seçenekleri İletişim Kutusu'nun CSS Properties: Style ElementGelişmiş alanında (tıklamanız gerekebilir More Options) ayarlanmışsa stil öğesi ve sınıfları oluşturur :Kaydet> Format: SVG> SVG Seçenekleri> Diğer Seçenekler> CSS Özellikleri: Stil Elemanı

Ayrıca üretilen kodun hiçbir zaman tüm durumlar için mükemmel olamayacağına da dikkat edin. Elle yazılmış kod, insanların okuması için daha hafif ve daha kolay olma eğilimindedir (eğer gidiyorsanız). SVG dosyalarını elle temizleme ve grunt-svgmin'e bir göz atmak için Wikimedia kullanıcısı Quibik'in belgesini okumanızı öneririm .


2

Bu soruna yeni rastladım ve şu çözümü buldum (Illustrator CC için):

SVG'yi Dahili CSS ile adlandırmak ve dışa aktarmak istediğiniz yollara "Grafik Stiller" uygulayın. Örneğin, my-icon adında bir Grafik Stil bir iç my-iconsınıf tanımlayacak ve bu sınıfı uygun yollara uygulayacaktır.

Ekran görüntülerine örnek:

Yeni bir Grafik Stili oluşturun: Grafik Stili Seçenekleri

... olarak aktar ... SVG:

Dışa aktar ... SVG

Çıktı:

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

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

  1. Uygun CSS Özellikleri Ayarı Kullan (mutluluk)

CC: Illustrator, adlandırılmış sınıfları oluşturmak için tanımlanmış Grafik Stillerini kullanır (akıllı, kullanışlı)


1

Illustrator 21.0.0 (2017) ve muhtemelen önceki sürümlerde:

  1. Grafik Stilleri panelinde yeni bir stil oluşturma
  2. Yeni stile çift tıklayın ve "stilim" gibi özel bir ad verin.
  3. Bu stili bir veya daha fazla elemana uygulayın
  4. SVG'yi dışa aktar

SVG'deki öğelere "my-style" değerinde bir sınıf niteliği verilecek. Sonra stilleri geçersiz kılmak için harici CSS kullanabilirsiniz.

Stil adınız bir boşluk içeriyorsa, bir tireye dönüştürüleceğini unutmayın.


0

Bunu yapmanın basit yolu, Grunt görevine benzer, ancak daha da kolay:

Sınıf yapmak istediğiniz tüm nesnelere, örneğin: "myClassmainCircle" ve "myClassmainStar" adlarını verin. Verme işleminden sonra hepsini değiştirin: 'id = "myClass', 'class ="' ile

Sonuç şöyle olacaktır: class = "mainCirle" class = "mainStar"

Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.