Figma, Canva veya WordPress'te SVG dosyalarınızı nasıl içe aktarır ve düzenlersiniz?

SVG'ye sahipsiniz. Peki şimdi?

Çoğu dönüştürücü İndir düğmesinde durur. Ancak İndirilenler klasöründe kalırsa dosya işe yaramaz. Bir tasarımcı, marka yönergelerini uygulamak için onu Figma'da açar. Bir topluluk yöneticisi, bir gönderi oluşturmak için onu Canva'ya bırakır. Bir entegratör, başlık logosu için onu WordPress'e koyar. PixelToPath'in bir demoya değil, gerçek bir iş akışına uyduğunu kanıtlayan bu sonraki adımdır.

Bir PixelToPath SVG'si statik bir görüntü değildir. Bir yollar kümesidir: her şeklin bir dolgusu, muhtemelen bir konturu vardır. Logonun mavisini bordoya çevirmek, simgeyi izole etmek, 1080x1920 hikaye için büyütmek: tüm bunlar Illustrator'a geri dönmeden halihazırda kullandığınız araçta yapılır.

Figma, Canva ve WordPress bu formatı neden seviyor?

PNG ve JPG içe aktarıldıklarında bit eşlemlerdir (bitmap). Figma'da bir PNG logosunu yeniden renklendirmek, yolun rengini değiştirmek değil, üzerine bir katman koymaktır. Canva renk paletleri sunmaz. WordPress, Retina'da bulanık, ağır bir dosya sunar. SVG her üç sorunu aynı anda çözer.

Somut olarak, PixelToPath'ten gelen bir SVG size şunları sağlar:

• Düzenlenebilir yollar: Figma'da (Dolgu) veya Canva'da (renk paletleri) değiştirilebilen, şekil başına tek renk
• Canva'nın 3 MB sınırının çok altında ve WordPress sitesine yüklenmesi @2x PNG'den daha hızlı, hafif bir dosya
• Bir favicon'da, bir LinkedIn afişinde veya bir rollup'ta aynı netlik: tek dosya
• Müşteriye gönderebileceğiniz bir teslimat: Creative Cloud'da değil, sahip olduğu araçla açar

Figma: SVG'yi içe aktarma ve renkleri değiştirme

Figma bir SVG'yi bir fotoğraf olarak değil, bir vektör grubu olarak içe aktarır. Bütün mesele budur: her şekil, yeniden renklendirebileceğiniz, hareket ettirebileceğiniz veya gizleyebileceğiniz bir katman olarak kalır.

1. .svg'yi PixelToPath'ten indirin ve Figma dosyanızı açın.
2. Dosyayı tarayıcıdan doğrudan tuvale sürükleyin. Varyant: SVG'yi yerleştirmek için Dosya → İçe Aktar, veya Ctrl+Shift+K (Mac'te Cmd+Shift+K).
3. Katman bir grup olarak görünür. İçine girmek için çift tıklayın veya şekilleri tek tek değiştirmek istiyorsanız sağ tıklayın → Grubu Çöz (Shift+Ctrl+G / Shift+Cmd+G).
4. Bir yol seçin. Sağ panelde, Dolgu (Fill) bölümünde palette tıklayın: hex, renk örnekleri, damlalık. Tüm şekil değişir, kenarlar net kalır.
5. Tek renkli bir logo için, grubun tüm şekillerini seçin ve tek bir renk uygulayın. Ardından, teslim edilen öğe artık vektör değilse Dışa Aktar bölümünden SVG, PNG veya PDF olarak dışa aktarın.

Figma, vektör katmanları yerine düz bir görüntü gösteriyorsa, dosya bir bit eşlem (kapsüllenmiş bir PNG) barındırıyordur. Siyah Beyaz veya Afiş ön ayarındaki PixelToPath dışa aktarımlarında bu durum söz konusu değildir. Orijinali Fotoğraf ile değil, bu iki moddan biriyle yeniden dönüştürün.

Canva: SVG'yi bırakma ve yeniden renklendirme

Canva, Pro'da olduğu gibi Free'de de SVG'leri kabul eder. Dosya basit olduğunda yeniden renklendirme işe yarar: düz renkler, az sayıda düğüm, degrade yok. Bu tam olarak PixelToPath'in Afiş veya Siyah Beyaz ile ürettiği şeydir.

1. Canva'da bir tasarım açın. Sol panel → Yüklemeler → Dosyaları yükle. .svg'nizi seçin (3 MB'den az; bir PixelToPath çıktısı bunun çok altındadır).
2. Dosya yüklemelerinize girdikten sonra, sayfaya sürükleyin. Tutamaçlarla yeniden boyutlandırın: vektör, hikaye veya A4 formatında bile net kalır.
3. SVG'ye tıklayın. Araç çubuğunda, dosyadaki renk tonu başına bir tane olmak üzere renk paletleri belirir. Bir palete tıklayın, yeni rengi seçin: Canva bunu bu tondaki tüm şekillere uygular.
4. Hiçbir palet görünmüyorsa, SVG çok karmaşıktır (degradeler, çok fazla renk, Fotoğraf tipi yollar). PixelToPath'e geri dönün, Afiş veya Siyah Beyaz'a geçin, yeniden dışa aktarın, yeniden içe aktarın.

Canva, bir SVG 1.1 profili, aynı renkte gruplandırılmış şekiller ve sıfır doku önerir. PixelToPath'in logo ön ayarları zaten bu kısıtlamalara uymaktadır. Dosyayı "hazırlamak" için Illustrator'dan geçmenize gerek yoktur.

WordPress: bir güvenlik açığı oluşturmadan SVG yüklemesine izin verme

WordPress varsayılan olarak SVG'leri reddeder ve bu bir heves değildir. Bir SVG XML'dir: JavaScript, harici varlıklar, bir XSS yükü içerebilir. Kötü amaçlı bir SVG yükleyen bir ziyaretçi veya güvenliği ihlal edilmiş bir Editör hesabı, yönetici alanında kod çalıştırabilir. Bu nedenle engelleme. Formata izin vermeli ve dosyayı temizlemelisiniz.

Sadece functions.php'ye image/svg+xml eklemeyin. Dosyayı temizlemeden bir açık bırakmış olursunuz. Güvenli yöntem: betikleri, onload etkinliklerini ve XML varlıklarını temizleyen, sürdürülen bir eklenti. Safe SVG (10up), bir milyondan fazla kurulum.

1. WordPress yöneticisinde: Eklentiler → Yeni Ekle. Safe SVG'yi (yayıncı: 10up) arayın. Yükleyin ve etkinleştirin.
2. Ayarlar → Ortam'a gidin. SVG yüklemesini yöneticilerle (veya güvenilir rollerle) sınırlandırın. Site birden çok katkıda bulunana sahipse formatı tüm Yazar hesaplarına açmayın.
3. Ortam → Yeni Ekle. PixelToPath .svg'sini bırakın. Eklenti içe aktarma sırasında temizler ve kütüphanede bir önizleme görüntüler, ki WordPress bunu yerel olarak yapmaz.
4. Bir gönderiye veya sayfaya Görüntü bloğu ekleyin ve SVG'yi seçin. Bir başlık logosu için, Özelleştir / site kimliğini veya tema şablonunda (site düzenleyicisi) bir Görüntü bloğunu kullanın.
5. Geliştirici varyantı: medya kitaplığından geçmeyin. Dosyayı temaya yerleştirin (assets/logo.svg) ve şablonda referans verin veya CSS'de stillendirmek için satır içi yapın. Yükleme yok, dolayısıyla ortam kütüphanesi saldırı yüzeyi yok.

Safe SVG, kimin yükleme hakkına sahip olduğunu da kısıtlayabilir. Eklentiyi güncel tutun: dosyayı temizlemek asıl kontroldür, tek başına "SVG'ye izin ver" kutusu değil.

Hangi PixelToPath SVG'si bu araçlara yapıştırılır?

Düzenleyici ona ne verirseniz yutar. Yanlış bir ön ayar içe aktarma sırasında bedelini ödetir: çok fazla şekil, alınamayan renkler, reddedilen dosya.

• Logo, simge, yazı: Siyah Beyaz veya Afiş. Bunlar düz renklerdir, Figma ve Canva bunları tek tıklamayla yeniden renklendirir.
• Renkleri değiştirmeyi planlıyorsanız Fotoğraf'tan kaçının. Bu mod çok sayıda küçük şekil oluşturur; Canva genellikle hiçbir kullanışlı palet göstermez.
• Dönüştürmeden önce orijinali kırpın: daha az arka plan, daha az düğüm, Figma katmanında daha okunabilir bir SVG.
• Kullanım başına bir varyant: Figma için tek renkli bir SVG (marka kuralları), Canva için renkli bir SVG (gönderi), WordPress için temizlenmiş aynı dosya (başlık).

Bu akışın günlüğü değiştirdiği yer

SVG araca girer girmez, her varyasyonda dönüştürmeyi bırakırsınız:

• Figma yönergeleri: müşterinin PNG'si yeniden çizmeden yeniden renklendirdiğiniz (birincil, ters, tek renkli) bir bileşen haline gelir
• Canva gönderileri: tek bir SVG, altı kampanya rengi, net hikayeler ve atlıkarıncalar
• WordPress logosu: başlıkta tek bir dosya, mobil ve Retina'da net, eski PNG'den daha hafif
• Serbest çalışan teslimatı: SVG'yi ve Figma / Canva kullanım talimatlarını verirsiniz. Müşteri artık engellenmez
• Arayüz simgeleri: bunları Figma'ya toplu olarak aktarın, 24 piksel ızgarada hizalayın, seti dışa aktarın

PNG'yi fotoğraflar için saklayın. Renk değiştirmesi veya net kalması gereken her şey için PixelToPath + Figma / Canva / WordPress ikilisi yeterlidir.