Simge yazı tipi için Sketch'ten dışa aktarma

SVG simgeleri Fontello'ya aktarmak için Sketch'ten SVG simgelerini dışa aktarmaya çalışıyorum, ancak SVG'ler uygulama için doğru görünmüyor (ayrıca IcoMoon'da da çalışmıyorlar).

Test olarak oluşturmaya çalıştığım simge, sadece birkaç satır olan basit bir 'hamburger' stil ikonu, ancak düzgün çalışmayacaklar. Az söylemek sinir bozucu.

Herkes bu konuda herhangi bir deneyimi var ve onların bilgi parçası olabilir? Teşekkür ederim.

Icomoon doğru içe aktarma için SVG'yi taslaktan nasıl dışa aktaracağımı anladım:

Aşama 1

Yol grubunu seçip şu katmana tıklayarak SVG'nin kenarlıklardan çıkmasını önleyin: katman> yollar> konturu vektörize edin

Bunun işe yaradığını bilmek için, kapalı yollara ve denetçiye dönüştürülen konturlar artık kenarlık rengi yerine dolgu rengini gösteriyor .

Adım 2

Her simgeyi / svg'yi denetçideki Dışa Aktarılabilir Yap sekmesine tıklayıp SVG formatını seçerek dışa aktarın .

Aşama 3

SVG simgelerini her zamanki gibi icomoon'a aktarın, şimdi set simgeleri doğru bir şekilde göstermeli ve ızgara boyutu doğru olmalıdır. NOT: Çizimdeki tüm SVG'lerinizin aynı yükseklikte olduğundan emin olun.

GÜNCELLEME 2016 @jackocnr'a şunu işaret ettiği için teşekkürler:

2016'da Çizim menüsü seçeneği Katman> Anahatlara Dönüştür

Bu kılavuz benim için çalıştı. çok bilgilendirici. yazar kroki ihracat problemleri hakkında konuşuyor. makalenin kaldırılması durumunda makalesinden alıntı yapıyorum.

Genel Çözüm

1. Her simge için bir çalışma yüzeyi oluşturun (Ekle -> çalışma yüzeyi).
2. Her çalışma yüzeyinin konumunda yarım piksel olmadığından ve çift sayı olduğundan emin olun.
3. Tüm simge rotasyonlarını kaldırın.
4. Sketch'in gereksiz kodu dışa aktarmaması için sınırlayıcı kutuları kaldırın.
5. SVG'nin sınır katmanından yapılmasını engelleyin> yollar> konturu vektörleyin (teşekkürler Gus )
6. ihracat Temiz .svg

* bu, yazarın dışa aktarmaya çalıştığı simgedir

Dışa aktarma hatalarını kroki

Hata # 1

çalışma yüzeyinin konumunu çift sayı olarak değiştirerek sabit çizim dönüştürmeyi dışa aktarma. Bu, koddaki tüm dönüşümleri kaldırır. Başka bir notta, konum yarım piksel kapalı olduğu için Sketch, görünüm kutumun boyutunu 0 0 25 25 olarak değiştirdi. Orijinal çalışma yüzeyim 24 x 24 pikseldi. Bu hata koda bile özellikler ekledi. Bueno yok.

Hata # 2

Sorun: Tasarım gereği, her simge genişlik: 24 piksel, yükseklik: 24 piksel ve kenarlık yarıçapı: 3 piksel olarak ayarlandı. Sorun, dışa aktarma sırasında, dikdörtgenin yola eklenmesi ve böylece herhangi bir boyutta css ile ölçeklendirilmesinin zorlaştırılmasıdır.

Çözüm: Saydam sınırlayıcı kutuları silin ve css sihrini yapsın. Gerçekten ihtiyaç duyulan tüm geliştiriciler, 24 x 24 piksele ayarlanmış görünüm kutusuydu. Genişlik, yükseklik ve sınır yarıçapı ekleyebilirler.

Hata # 3

Sorun: Sketch bir döndürme dışa aktarıyor (-180.000000).

<path d=”M16,7.4 L14.4864865,6 L8,12 L14.4864865,18 L16,16.6 L11.027027,12 L16,7.4 Z” fill=”#000000" transform=”translate(12.000000, 12.000000) rotate(-180.000000) translate(-12.000000, -12.000000) “></path>

Çözüm: .svg simgenizi Adobe Illustrator'da açın, simgeyi döndürün, ardından Sketch'e sürükleyip bırakın. Bu rotasyonu hep birlikte kaldırır.

Hata # 4 Sorun: dilim aracı dışa aktarma çevirmek ve tekrar dönüştürmek kullanarak. Çözüm: Hiçbir şey. Sadece yapma. Zaten dilimlemek çok uzun sürüyor ve zaman kaybı.

Alt yollar kullanıyorsanız, dışa aktarmadan önce şekli düzleştirin. Hala Fontello'da elle bileşik yollar oluşturma konusunda bir hata aldım, ancak doğru çalışmış gibi görünüyor.

(şeklim iki şekli kesilmiş bir daireydi.)