SVG nasıl düzenlenir: Görsel düzenleyici veya kod

Bir SVG dosyasını düzenlemek için kopyasını, şekil, renk ve eğri değişikliklerinde görsel düzenleyicide, işaretlemedeki küçük değişikliklerde ise metin düzenleyicide açın. SVG olarak kaydedip sonucu kontrol etmek için kaydedilen dosyayı yeniden açın. Doğru yöntem, istediğiniz değişikliğe ve dosyanın içindeki nesnelere bağlıdır.

Yapıyı daha fazla değiştiren bir komut seçmeden önce neyi seçtiğinizi belirleyin. Bir grup, birkaç parçalı tek bir yol ve gömülü PNG tuvalde tek nesne gibi görünebilir. Her biri farklı bir düzeltme gerektirir.

Kopya hazırlayın ve SVG nesnelerini tanıyın

SVG dosyasına, çalışma kopyasına, düzenleyiciye ve SVG destekleyen bir görüntüleyiciye ihtiyacınız var. Dışa aktarılan kopya kontrollerden geçene kadar orijinali saklayın.

SVG, Scalable Vector Graphics anlamına gelir. XML işaretlemesi vektör şekilleri ve yolları tanımlayabilir, ancak gömülü görseller de içerebilir. Yol, bir çizgiyi veya şekli tanımlar; düğüm, vektör düzenleyicisinde o yol üzerinde düzenlenebilen bir noktadır. SVG uzantısı tek başına görünür çizimin bu noktaları sunup sunmadığını söylemez.

Kopyayı açın ve seçili nesneyi Katmanlar veya Nesneler panelinde inceleyin. Gerekirse işaretlemeye metin düzenleyicisinde bakın. Yapısını değiştirmeden önce nesne türünü belirleyin:

<image> öğesi PNG veya JPEG içeriğine başvurabilir. Dış dosya .svg ile bittiği için pikseller yola dönüşmez. Büyütüldüğünde bloklu kenarlar bir ipucudur; nesne paneli ve kaynak başvurusu daha belirgin bir teşhis sağlar. Bazı düzenleyiciler geçerli bir vektör SVG'yi de tek grafik nesnesi olarak ekler; dolayısıyla tek seçim tek başına pek az şey kanıtlar.

Bir bileşik yol, “O” harfinin ortası gibi boşlukları koruyabilir. Parçalamak bu boşlukları değiştirebilir. Ungroup kullanılamıyorsa veya etkisizse SVG nesne türü teşhisini kullanın.

Görsel düzenleyici veya kod seçin

Inkscape ücretsiz ve açık kaynaklıdır; macOS, Windows ve Linux'ta çalışır ve ana biçimi SVG'dir. Illustrator zaten iş akışınızdaysa başka bir seçenektir. Figma, tasarım araçları arasında varlıkları SVG olarak taşıyabilir, ancak içe aktarma rehberi SVG marker ve pattern öğelerini kapsam dışı tutar. Bir düzenleyicide karar kılmadan önce karmaşık içe aktarmayı kontrol edin.

Canva'nın belgelenmiş SVG düzenleme iş akışı temel renk ve yerleşim değişikliklerini kapsar. Tarayıcı düzenleyicileri küçük işlere uygun olabilir. Dosyanızın dolguları, kontur çizgileri, metni ve efektleri için desteği ve güncel dışa aktarma koşullarını kontrol edin. Desteklenen düz dolguları tam renklerine göre hizalı dosyalara ayırmak gibi daha dar bir görev için SVG Color Separator kullanın; yolları yeniden şekillendirmek için vektör düzenleyicisini seçin.

Şekilleri görsel olarak düzenleyip dışa aktarımı doğrulayın

Komut adları düzenleyiciye göre değişir, ancak işlem sırası şöyledir:

1. Çalışma kopyasını açın. İçe aktarılan tasarımı orijinalle karşılaştırın. Yazı, desen veya efektler zaten değiştiyse durun.
2. Amaçlanan nesneyi seçin. Panele göre gerçekten bir grupsa gruba girin veya çözün. Yolsa düğüm ya da doğrudan seçim aracına geçin.
3. Tek bir değişiklik yapın. Dolguyu değiştirin, bir parçayı taşıyın veya birkaç düğümü düzeltin. Yeniden boyutlandırırken bilinçli esnetme dışında en-boy oranını koruyun.
4. Değişen alanı kontrol edin. Eğrileri ve küçük boşlukları yakından inceleyip tüm tasarımı kullanım boyutunda görün.
5. Yeni bir SVG kaydedin veya dışa aktarın. Dosyayı görüntüleyicide ve kullanılacağı uygulamada yeniden açın. Düzenlenen parçayı, genel ölçüleri ve gereken seçilebilir nesneleri doğrulayın.

Yeniden renklendirmede şeklin içindeki boya olan dolgu ile kenarındaki boya olan kontur çizgisini ayırın. Tek görünür renk birçok nesneyi kapsayabilir. Düzenleyicinin aynı dolgu seçimi yardımcı olur, ama değişiklikten önce seçimi kontrol edin; başka bir parça da aynı boyayı kullanabilir. SVG renk düzenleme rehberi, kalıtılan stilleri ve değişmeyen renkleri ele alır.

Düzenleyiciniz kendi biçimini veya ek meta veriyi kullanıyorsa düzenlenebilir çalışma ana dosyasını saklayın. Adobe'nin SVG kaydetme seçenekleri yazı tipleri, CSS özellikleri, raster görseller ve Illustrator düzenleme verileri için ayarlar içerir. Dışa aktarım sonrası doğru görünen dosyada yine de farklı işaretleme veya rasterleştirilmiş içerik olabilir. Görselin yanı sıra gerekli nesneleri ve bağlantıları da karşılaştırın.

Küçük, kontrollü değişiklik için SVG kodunu düzenleyin

SVG kopyasını VS Code veya başka bir düz metin düzenleyicisinde açın. Ad alanını, öğe adlarını ve tırnak işaretlerini koruyun. Bir değişiklik yapıp sonraki değişiklikten önce dosyayı görüntüleyin.

Yolu değiştirmeden dolguyu değiştirin

Bu örneği triangle.svg olarak kaydedin ve SVG destekleyen bir görüntüleyicide açın:

<svg xmlns="http://www.w3.org/2000/svg"
     width="48" height="48" viewBox="0 0 48 48">
  <path id="triangle" class="icon-shape" fill="#3b82f6"
        d="M24 8 L40 40 H8 Z" />
</svg>

1. Yolun fill niteliğinde #3b82f6 yerine #f97316 yazın.
2. Kaydedip dosyayı yeniden açın veya yenileyin.
3. Üçgenin turuncu olduğunu ve konturunun değişmediğini kontrol edin. d yol verisi, id ve class orijinalle aynı kalmalıdır.

Renk değişmezse görünümü kontrol ediyor olabilecek style niteliğini, sınıf kuralını, kalıtılan boyayı veya kontur çizgisini inceleyin. Dosyadaki rengin her örneğini değiştirmek yerine sorumlu boya kuralını değiştirin.

Yöntem notu: Bu örneği dolgu değişikliğinden önce ve sonra bir SVG oluşturucuyla görüntüledik ve oluşan pikselleri kontrol ettik. Üçgen renk değiştirdi; yol verisi, ID ve sınıf aynı kaldı. Bu küçük örnek karmaşık bir SVG'nin tasarım uygulamasında içe veya dışa aktarımını sınamaz.

viewBox ile boş kenarları kaldırın

Kök viewBox dört sayı içerir: minimum x, minimum y, genişlik ve yükseklik. SVG'nin koordinat alanında, görüntülenen alana eşlenen dikdörtgeni tanımlarlar.

Örnekte üçgen x=8 ile 40 ve y=8 ile 40 arasındadır. Yol verisini koruyarak viewBox="0 0 48 48" yerine viewBox="8 8 32 32" yazın. Kaydedip yeniden görüntüleyin. Boş kenarlar kaldırıldığından üçgen aynı 48 × 48 görünüm alanının daha büyük bölümünü doldurur.

Bu düzenleme tuval eşlemesini değiştirir; yol geometrisini veya kök width ve height değerlerini değiştirmez. Gerçek çizimde kontur çizgileri ve efektlere alan bırakın; dar geometri kutusu bunları kırpabilir. Genellikle daha güvenli görsel seçenek sayfayı veya çalışma alanını çizime sığdırıp dışa aktarılan kopyayı incelemektir. Dosya yanlış fiziksel boyutta içe aktarılıyorsa SVG ölçüleri ve viewBox rehberini izleyin.

Çizim kaybolur, kırpılır veya esnerse orijinal viewBox değerini geri getirip dört değeri ve en-boy oranını kontrol edin. Tuval sorununu tüm düğümleri taşıyarak “düzeltmeyin”.

İzlenerek oluşturulan SVG ne zaman temizlik ister?

Raster görsel pikselleri bir ızgarada saklar. Vektörleştirme bu piksellerden geometri oluşturur; dolayısıyla izlenen dosya renkleri ve konturları orijinal tasarımdan farklı düzenleyebilir.

Görünür tek bir parça küçük yollara dağılmış olabilir. Tek renk birkaç ayrık bölgeyi de kapsayabilir. Yoğun düğümler, küçük benekler, arka plan şekilleri ve üst üste konturlar basit bir düzenlemeyi yavaşlatabilir. Dosyayı yalnızca bir yakınlaştırma seviyesindeki keskinliğine göre değerlendirmek yerine bu özellikleri inceleyin.

Parçalanmış yapı

Daha basit yapı

Bu illüstrasyonlar düzenleme çabasını anlatır; dönüşüm örnekleri veya ölçülmüş ürün karşılaştırması değildir. İzleme sonucunu saklamaya değerse sorunlu alanları onarın ve yalnızca kontur doğru kaldığında basitleştirin. Raster çizimden geldiyse ve temizlik aşırı iş gerektiriyorsa orijinali yeniden vektörleştirmeyi deneyin. Kullanılabilir doğal vektör geometrisini koruyun; ekran görüntüsünü izlemeyin.

PerfectVector ile süreç nasıl görünür?

PerfectVector, orijinal PNG veya JPEG ya da SVG içindeki raster içerik gibi çizimlerden yollar üretmeniz gerektiğinde uygundur. Korumak istediğiniz mevcut vektör çizimleri için yukarıdaki genel düzenleme yöntemlerini kullanın.

Kendi dönüşümünüzde şu sırayı izleyin:

1. Raster kaynağı yükleyin ve vektör önizlemesini karşılaştırın. Eksik ayrıntıları, istenmeyen bölgeleri ve kaynaktan farklı konturları arayın.
2. Düzenleme veya dışa aktarmadan önce sonucu açın. Dönüşüm ve önizleme ücretsiz ve sınırsızdır; güncel kamuya açık fiyatlandırma politikası, her benzersiz sonucun bir krediyle açıldığını ve açılmış sonucun tekrar indirilmesinin ücretsiz olduğunu belirtir.
3. Açılmış geometriyi inceleyip düzenleyin. Gereken şekil ve düğümleri kontrol edin, yararlıysa paleti ayarlayın ve düzenlenen sonucu kullanım boyutunda karşılaştırın.
4. Dışa aktarın ve sonraki uygulamada doğrulayın. SVG'yi yeniden açın, gereken parçaları seçin, ölçüleri ve küçük ayrıntıları kontrol edin. Önizleme tek başına her düzenleyici, yazıcı veya kesici için hazır olduğunu göstermez.

Raster yazı geometri olarak yeniden oluşturulur; düzenlenebilir yazılı metne dönüşmesini beklemeyin. Önemli bir harf, eğri veya küçük boşluk izleme sırasında kaybolursa elle düzeltme ya da yeniden çizme seçeneğini hazır tutun.

Sık sorulan sorular

SVG'yi ücretsiz nasıl düzenlerim? Görsel düzenleme için Inkscape, işaretleme değişiklikleri için düz metin düzenleyicisi kullanın. Tarayıcı araçları da ücretsiz özellikler sunabilir; güncel dışa aktarma koşullarını ve dosyanızın SVG özelliklerini destekleyip desteklemediklerini kontrol edin.

SVG'yi VS Code'da düzenleyebilir miyim? Evet. Küçük dolgu değişikliği, ölçüler, viewBox veya gereken ID ve sınıflar için XML işaretlemesini düzenleyin. Kopya kaydedip ardından görüntüleyin. Eğrileri yeniden şekillendirmek için görsel düzenleyici kullanın.

SVG'mde ayrı şekilleri neden seçemiyorum? Nesne türünü inceleyin. Grup, birkaç alt yollu tek yol, kırpılmış çizim veya gömülü görsel olabilir. Gerçek gruba girin veya çözün; geometri için yol düğümlerini düzenleyin; raster içeriği yalnızca yollar gerektiğinde vektörleştirin.

SVG'yi Canva'da düzenleyebilir miyim? Canva'nın belgelenmiş SVG iş akışı temel renk ve yerleşim değişikliklerini kapsar. İçe aktarılan dosyayı ve güncel SVG indirme koşullarını kontrol edin. Hassas kontur değişiklikleri veya ID ve sınıf kontrolü için vektör düzenleyici ya da işaretleme kullanın.

PerfectVector sonucunu açmadan düzenleyebilir miyim? Kendi dönüşümünüzde önce önizlemeyi karşılaştırın; ardından düzenleme ve dışa aktarma kontrollerini kullanmadan önce sonucu açın. Dışa aktarılan SVG'yi kullanılacağı uygulamada inceleyin.

Kaynaklar

1. W3C — Scalable Vector Graphics (SVG) 2 — SVG'nin belge, şekil, yol ve stil modeli.
2. W3C — SVG gömülü içeriği — raster görseller SVG belgesinin içinde gömülü kalabilir.
3. W3C — SVG koordinat sistemleri, dönüşümleri ve birimleri — viewBox eşlemesi ve geometri ile görünüm ölçülerinin farkı.
4. Inkscape — Hakkında — resmi platform, SVG biçimi ve açık kaynak bilgileri.
5. Adobe — Illustrator'da çizim kaydetme — SVG dışa aktarma ayarları ve korunan Illustrator düzenleme verileri.
6. Figma — Tasarım araçları arasında varlık kopyalama — SVG aktarımı ve marker/pattern içe aktarma sınırları.
7. Canva — SVG düzenleyici — belgelenmiş temel renk, boyut ve yerleşim işlemleri.
8. PerfectVector — Fiyatlandırma politikası — güncel önizleme, sonuç açma ve yeniden indirme koşulları.

Kullanılabilir SVG'yi saklayıp mevcut geometrisini düzenleyin. Kaynağınız rasterse veya izleme sonucu değiştirilmeli ise orijinal görselinizi PerfectVector'de deneyin, önizlemeyi kaynakla karşılaştırın, düzenlemeden önce sonucu açın ve dışa aktarılan şekilleri ve ölçüleri sonraki uygulamada inceleyin.