Eskizden Bir SVG Dışa Aktarmanın En İyi Yolu

SVG Kodunu Kopyalamadan önce bilmeniz gerekenler.

Eskizden bir SVG dosyasını dışa aktarmak kolaydır - ancak ihtiyaçlarınıza göre verimli ve güvenilir bir SVG yapma işlemi çok daha büyük bir konudur. Aslında bu kadar karmaşık bir konu, bu konuda 8 ay süren geliştirmeden sonra yayınlayacağım, bu konu hakkında tam bir kurs yaptım! Ancak bu makale bir satış perdesi değildir; tasarımcıların sorduğu ortak bir soru için teknik bir rehberdir.

Eskizlerden SVG ihraç ederken sıkça sorulan sorular şudur: “Dışa aktarmak için hangi özelliği kullanmalıyım? SVG Kodunu Kopyala? Dışa Aktar düğmesi? Başka bir şey?"

Bu özelliklerin her birini derinlemesine inceledim ve bu makalede sizin için bulgularımı ve tavsiyelerimi derledim.

Bitmap formatları söz konusu olduğunda, katmanlarınızı bir dilim veya Çalışma yüzeyinde tutmanızın bir önemi yoktur; kolaylık sağlamak için tasarımı Katman Listesinden çıkardıysanız veya Müfettiş'deki Dışa Aktar düğmesini kullanıp kullanmadığınız. Son grafiğiniz aynı olacak.

Ancak SVG'ler farklıdır. Onlar, katmanlarınız hakkında tonlarca bilgi içeren tasarımınızın açıklamalarıdır. Ve SVG'yi Eskiz'den nasıl çıkardığınıza bağlı olarak, bu tanımların değiştiği ince yollar var. Grafikleriniz aynı görünecek, ancak altındaki kod değişecektir.

Ana değişkenler:

Dışa Aktarmanın Hangi Özelliği Var?
Müfettiş, Dışa Aktar düğmesini SVG Kodunu Kopyala işlevini mi kullanıyorsunuz veya Katman Listesi veya Müfettiş dışa aktarma önizlemesinden mi sürükliyorsunuz?

Ne Dışa Aktarırsınız
Çalışma yüzeyini, katmanı veya dilimi mi dışa aktarıyorsunuz? Yalnızca seçili katmanları veya dilimleri dışa aktarıyorsanız, bir Çalışma Yüzeyinde yer alıyorlar mı yoksa Tuvalin etrafında yüzüyorlar mı?

Diğer işlemler
Dosyayı optimize etmek için Sketch’in SVGO Kompresör eklentisine mi güveniyorsunuz?

Birleştirildiğinde, bu değişkenler tasarımınızdan bir SVG vermenin en az bir düzine yoluna izin verir. Peki hangisi en iyisi?

Take️ Paket Servisler ve Öneriler

Nitty-gritty teknik detaylarına aldırış etmiyorsanız, işte SVG ihracat iş akışınızla ilgili ipuçlarım:

  • Çalışma yüzeyleri anahtardır. Her zaman katmanlarınızın çevresinde bir Çalışma Yüzeyine sahip olun ve içindeki Çalışma Yüzeylerini, içindeki katman veya dilimler yerine dışa aktarın.
  • Müfettiş'teki Dışa Aktar düğmesini veya Düzen menüsündeki SVG Kodunu Kopyala işlevini kullanmaktan çekinmeyin, ancak bunları yine Çalışma yüzeyinizde kullanın.
  • SVG Kodunu Kopyala, bir başlık öğesi (erişilebilirliği artırmak için) veya bir XML bildirimi (bağımsız grafikler olarak kullanılan SVG'ler için önerilir) gibi, SVG'nizde isteyebileceğiniz birkaç küçük şeyi hariç tutar.
  • Sketch’in SVGO Kompresörü eklentisini kullanmak istiyorsanız, SVG Kodunu Kopyala değil, yalnızca Dışa Aktar düğmesiyle kasıtlı olarak çalıştığını unutmayın.
  • Verimliliğinizi artırmak için aşağıdaki klavye kısayollarına göz atın!

Bu sonuçlara nasıl ulaştığımı ve her ihracat yöntemi arasındaki belirli farkların ne olduğunu anlamak için katmanların bir SVG'de nasıl konumlandırıldığını anlamamız gerekir.

“Ben ordayım ama buraya taşındım”

Her SVG, elemanların yerleştirildiği bir ızgaraya veya “koordinat sistemine” sahiptir. Bu, SVG'lerin çalışma şeklinin temelini oluşturur.

SVG'lerde ayrıca viewBox adında bir şey vardır ve Sketch'deki bir Artboard'a biraz benziyor. ViewBox, SVG’nin şebekesinin hangi bölümünün son grafiğinizde görüneceğini belirler; içindeki herhangi bir şey görünür olacak ve dışarıdaki herhangi bir şey kırpılacaktır.

Genel olarak kabul edilen bir uygulama olarak, viewBox genellikle şebekenin kökenine yerleştirilir. Başka bir deyişle, viewBox'un sol üst köşesi 0,0 olarak konumlandırılmıştır (hem x hem de y eksenlerinde sıfır). Izgara üzerinde herhangi bir yere yerleştirilebilir, ancak çoğu senaryo bu sözleşmeye bağlı kalmaktan yararlanır.

Bir grafiği Sketch (herhangi bir biçimde) dışa aktarırken, kullanıcının grafiğinizin boyutlarını tanımlamasına izin veren bazı yaklaşımlar ve Sketch'in sizin için boyutları belirlediği bazı yaklaşımlar vardır. Örneğin, bir Çalışma yüzeyini veya dilimi verirseniz, kontrol sizdedir. Herhangi bir katmanı seçip İçe Aktarılabilir Yap'ı tıklatırsanız, Çizim kontrolü altındadır ve seçtiğiniz katmanın tam boyutunda bir grafik oluşturur (bunun gölgeleri ve kenarlıkları).

Yalnızca bu kırmızı dikdörtgen katmanını SVG olarak dışa aktarırsak, dikdörtgenin etrafında fazladan boşluk kalmaz - viewBox, dikdörtgen ile aynı boyutta olur. Bu nedenle Sketch'in hem görünüm kutusunu hem de dikdörtgeni yeni SVG'nin ızgarasında 0,0 olarak konumlandırmasını bekleyebilirsiniz.

Bu yaklaşımın dezavantajı, dikdörtgenin Çalışma Alanında nereye yerleştirildiği hakkındaki bilgileri kaybetmenizdir. Neyse ki, Sketch, SVG elemanlarınızın konumlarının, çoğunlukla bir Çalışma Yüzeyindeki katmanlarınızla aynı olması gerektiğini kabul eder.

Bu yüzden, sadece bu kırmızı dikdörtgeni dışa aktarırken, Sketch, dikdörtgenin boyutlarına sahip bir viewBox oluşturur, ancak viewBox değerini 0,0 olarak tutar. Sketch ayrıca, Çalışma Alanındaki dikdörtgenin orijinal konumuna da saygı duyar ve temel konum özelliklerini değiştirmeden dikdörtgeni 0,0'a kaydırmak için bir numara kullanır.

Bu numaraya tercüme dönüşümü denir. Ölçek ve döndürme gibi birçok dönüşüm türü vardır, ancak çeviri en temel olanıdır: basitçe bir öğeyi taşır. Yup - “tercüme et” sadece “hareket” için süslü bir kelimedir.

Bir yerde bir element oluşturmak gereksiz olabilir, ardından hemen başka bir yere taşıyın. Ancak bu 2 aşamalı işlem, dikdörtgenin orijinal konum bilgisini korumak için, aynı zamanda SVG'nin ızgarasında 0,0'a konumlandırılmış bir viewBox bulundurma kuralına bağlı kalarak gereklidir. Bunlar saçma nedenler gibi gelebilir, ancak aslında SVG koduyla çalışırken önemli olabilir. İşte gerçek dünya senaryosu:

Çeviri Dönüşümleri Yararlı Olduğunda

Deneyimlerime göre, SVG öğelerini karşılık gelen Eskiz katmanlarının olduğu yere konumlandırmanın gerekli olduğu bir senaryo var: mevcut bir SVG grafiğine katman değiştirirken veya eklerken.

Her zaman sevimli olan "Monsieur Whale" ikonunu SVG olarak dışa aktardığınızı ve onu optimize etmek, ince ayar yapmak ve belki de bir animasyon sayfasına yerleştirmek için harcadığınızı hayal edin. Ama sonra bazı değişiklikler yapın.

Ağız yolunu değiştirdikten ve püskürtme çizgileri ekledikten sonra, bu değişiklikleri dikkatlice hazırlanmış SVG'nize dahil etmek istersiniz. Yalnızca yeni katmanlarda SVG Kodunu Kopyala dışa aktarır veya kullanırsanız, Sketch hem kendi başına bir grafik olarak geçerli olan hem de orijinal SVG'nize dahil etmek üzere seçilen bir kısmı kopyalamak için kullanılabilen bir SVG oluşturur. İkincisi yapmak kolaydır, çünkü dönüşüm bir grubuna uygulanır; tasarım öğeleriniz içindeki orijinal konumlarına sahiptir ve kopyalamaya hazırdır.

Yeni SVG kodunun kaba bir sadeleştirmesi:

  
    
    
    
    ...
  
(Kalın = orijinaline geri kopyalayacağınız değişiklikler)
Yeni vektör yollarının tümü, orijinalle aynı SVG ızgarası içinde konumlandırılmıştır, bu nedenle kolayca yapıştırılabilirler. Bir SVG'yi tekrar gözden geçirerek - Eskiz bıraktıktan sonra bile - neredeyse zahmetsiz hale gelir.

Yapmış olduğunuz bir grafiği değiştirirken yalnızca bu katman başına iş akışını kullanmanızı öneririm. Yukarıdaki Take-Aways bölümünde belirtildiği gibi, Artboard'u dışa aktararak yeni SVG'leri başlatmak en iyisidir - bu şekilde çeviri, son SVG'nizi karıştırmaz.

Optimizasyon Üzerine Bir Not

Seçilen katmanlar için SVG Kodunu Kopyala'yı kullanıyor ve bunları mevcut bir SVG'ye dahil ediyorsanız (yukarıda açıklandığı gibi), kopyalanan kodu SVGOMG benzeri bir en iyi duruma getiriciye koyarken dikkatli olun.

Ben büyük bir SVGOMG hayranıyım ve kursumdaki tüm seçeneklerini kapsayacağım, ancak bazı optimizasyonlar bu dönüşümü değiştirecek - düzeltecek veya düzeltecek - bir öğeyi mevcut SVG'nize dahil ettiğinizde kopyalanması gereken . Faydasız grupları daralt ve attr'leri gruplardan öğelere taşı gibi optimizasyonlar, dönüştürme özelliğini kopyalamak istediğiniz öğeye taşıyabilir (kapsayıcısının grubunda bırakmak yerine). Bu durumda silinmesi oldukça kolaydır. Ancak Yuvarlak / Yeniden Yazma Yolları optimizasyonu, bu öğenin vektör noktalarına dönüşümünü düzleştirerek etkili bir şekilde kalıcı hale getirebilir.

Kopyalanan SVG kodunuzu SVGOMG üzerinden çalıştırmak kötü bir şey değildir - bu çeviri dönüşümünü hala bulabildiğinizden emin olun. Ve öğelerine dönüşecek katmanları kopyalıyorsanız, tüm Çalışma Yüzeyini kopyalamaktan daha iyi bir şekilde yararlanabilirsiniz, böylece çeviride hiç dönüşüm olmaz.

Klavye Kısayolları İpucu

SVG Kodunu Kopyala'yı kullanmaya ve sevmeye başlarsanız, iş akışınızı daha da verimli hale getirmek için bir ipucu.

Müthiş Çizim Komutları eklentisini yükleyin; Çalıştığınız katmanın Çalışma Yüzeyini seçmek için bir işlev ekler. Ardından, Geçerli Çalışma Yüzeyleri komutu için ve SVG Kodunu Kopyala için Sistem Tercihleri'nde özel klavye kısayolları oluşturun. Seçtiğiniz anahtarlar kişisel bir tercih meselesidir — Bunları sırasıyla ⌘ A (Sketch’in Tüm Çalışma Yüzeylerini Seç işlevini değiştirerek) ve kontrol seçeneği ⌘ S olarak değiştirdim.

Bu yeni kısayollar, Çalışma Yüzeyini bir tuş vuruşunda seçmenize ve SVG kodunu bir başkasına kopyalamanıza izin verir!

Her Yöntem Nasıl Çalışır?

Sketch’in dışa aktarma özellikleri ile yukarıda belirtilen tüm değişkenler arasındaki farkları tam olarak bilmek istiyorsanız, testlerimin sonuçlarını burada bulabilirsiniz:

Sketch’in SVG ihracatı son bir yılda ve hatta son birkaç güncellemeyle önemli ölçüde gelişti. Ancak bazı en iyi uygulamalar gerçek kalır: her zaman katmanlarınızın çevresinde bir Çalışma Tahtası kullanın ve çalışma yüzeyini tek tek katmanlar veya dilimler yerine dışa aktarın veya kopyalayın. SVG Kodunu Kopyala işlevi artık Dışa Aktar düğmesine göre daha düşük değildir; ne zaman ve nasıl kullanılacağını biliyorsanız, tasarım iş akışınızda önemli bir verimlilik artışı sağlayabilir.

Bu makale Sketch'daki yeni kursum SVG Workflows'tan ilham aldı. SVG'yi öğrenirken bu gibi kaynaklara sahip olmayı dilerdim, bu yüzden diğer tasarımcılara bu eksik parçaları sağlamaya kararlıyım. Kurs, Sketch'de bildiklerinizle SVG ile yaratacağınız harika şeyler arasındaki boşluğu kapatmayı hedefliyor.

Bültenim için yeni tasarım makaleleri ve kaynakları yayınladığımda ilk bilen kişi olmak için kaydolabilirsiniz.