> [Site index](https://perfectvector.com/llms.txt) — available pages and descriptions. # SVG nasıl düzenlenir: Görsel düzenleyici veya kod > SVG şekillerini görsel düzenleyicide düzenleyin veya kodu değiştirin. Grupları, yolları ve gömülü görselleri tanıyıp renkleri, tuvali ve kaydedilen sonucu kontrol edin. Source: https://perfectvector.com/tr/blog/how-to-edit-an-svg Language: tr Author: Irene Kim Published: 2026-05-30T08:00:00+09:00 Updated: 2026-10-08T08:00:00+09:00 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. > **Düzenleme yolunu seçin** > > * **Renk, boyut, konum ve eğriler:** Inkscape, Illustrator veya uyumlu bir tarayıcı vektör düzenleyicisi kullanın. > * **ID, sınıf, hex renk veya tuval:** SVG kodunun bir kopyasını düzenleyip görüntülenmesini kontrol edin. > * **Her şey birlikte seçiliyor:** nesne türünü inceleyin; Ungroup komutunu yalnızca gerçek gruplarda kullanın. > * **Yalnızca raster çiziminiz var:** kaynağı vektörleştirin, önizlemeyi karşılaştırın, ardından düzenleme ve dışa aktarmadan önce PerfectVector sonucunun kilidini açın. ## 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](https://www.w3.org/TR/SVG2/). 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: | Seçili içerik | İncelenecek özellik | İlk işlem | | -------------------------------- | ------------------------------------------------ | --------------------------------------------------------------------------- | | Grup | Kodda genellikle `` olan bir grup kapsayıcısı | Gruba girin veya bir kez grubu çözün; yalnızca iç içe gruplarda tekrarlayın | | Ayrık parçalı veya delikli yol | Birkaç alt yol içeren tek yol | Düğümleri düzenleyin; ayrı parçalara gerek varsa bir kopyayı parçalayın | | Tek sürekli yol | Kontur boyunca düzenlenebilir düğümler | Düğüm veya doğrudan seçim aracını kullanın | | Kırpılmış veya maskelenmiş çizim | İçeriğiyle birlikte kırpma ya da maske | Sınırı kaldırmadan önce içeriği inceleyin | | Gömülü PNG veya JPEG | Raster veriye başvuran `` görsel nesnesi | Raster kaynağı düzenleyin veya yollar gerekiyorsa vektörleştirin | [`` öğesi PNG veya JPEG içeriğine başvurabilir](https://www.w3.org/TR/SVG2/embedded.html). 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](https://perfectvector.com/tr/blog/svg-wont-ungroup) kullanın. ## Görsel düzenleyici veya kod seçin | Düzenleme | Yararlı yöntem | Sonrasında kontrol | | ----------------------------------------- | ------------------------------------------------------------ | ----------------------------------------------------------------- | | Şekli yeniden renklendirmek veya taşımak | Görsel düzenleyici | Yalnızca amaçlanan nesneler değişti | | Konturu yeniden şekillendirmek | Düğüm veya doğrudan seçim aracı | Eğriler, köşeler ve boşluklar tasarıma uyuyor | | Bilinen tek dolgu değerini değiştirmek | Metin düzenleyici | Görünür boya değişti; başka stil onu geçersiz kılmadı | | CSS veya animasyon bağlantılarını korumak | Metin düzenleyici | Gerekli ID ve sınıflar kaydedilen işaretlemede duruyor | | Fazla tuval boşluklarını kaldırmak | Sayfayı/çalışma alanını sığdırmak veya `viewBox` değiştirmek | Çizim, kontur çizgisi veya efekt kırpılmadı | | Ayrı kesim katmanları hazırlamak | Hedefe özgü iş akışı | Geometri ve içe aktarılan katmanlar kesim uygulamasında çalışıyor | [Inkscape ücretsiz ve açık kaynaklıdır](https://inkscape.org/about/); 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](https://help.figma.com/hc/en-us/articles/360040030374-Copy-assets-between-design-tools). Bir düzenleyicide karar kılmadan önce karmaşık içe aktarmayı kontrol edin. Canva'nın belgelenmiş [SVG düzenleme iş akışı](https://www.canva.com/features/svg-editor/) 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](https://perfectvector.com/tr/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](https://perfectvector.com/tr/blog/how-to-change-svg-color), 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](https://helpx.adobe.com/illustrator/using/saving-artwork.html) 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 ``` 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](https://www.w3.org/TR/SVG2/coords.html#ViewBoxAttribute). 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](https://perfectvector.com/tr/blog/svg-imports-wrong-size) 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ı** ![Yoğun bağlantı noktaları içeren parçalanmış vektör şekillerinin illüstrasyonu](https://perfectvector.com/blog/how-to-edit-an-svg/messy-svg-editing.webp) *İllüstrasyon: çok sayıda küçük parça ve yoğun düğümler doğrudan seçimi ve yeniden şekillendirmeyi zorlaştırır.* **Daha basit yapı** ![Daha az bağlantı noktası içeren daha büyük vektör şekillerinin illüstrasyonu](https://perfectvector.com/blog/how-to-edit-an-svg/clean-svg-editing.webp) *İllüstrasyon: büyük şekilleri ve daha ekonomik düğüm yerleşimini incelemek ve düzenlemek daha kolaydır.* 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ı](https://perfectvector.com/pricing.md), 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](https://www.w3.org/TR/SVG2/) — SVG'nin belge, şekil, yol ve stil modeli. 2. [W3C — SVG gömülü içeriği](https://www.w3.org/TR/SVG2/embedded.html) — raster görseller SVG belgesinin içinde gömülü kalabilir. 3. [W3C — SVG koordinat sistemleri, dönüşümleri ve birimleri](https://www.w3.org/TR/SVG2/coords.html) — viewBox eşlemesi ve geometri ile görünüm ölçülerinin farkı. 4. [Inkscape — Hakkında](https://inkscape.org/about/) — resmi platform, SVG biçimi ve açık kaynak bilgileri. 5. [Adobe — Illustrator'da çizim kaydetme](https://helpx.adobe.com/illustrator/using/saving-artwork.html) — SVG dışa aktarma ayarları ve korunan Illustrator düzenleme verileri. 6. [Figma — Tasarım araçları arasında varlık kopyalama](https://help.figma.com/hc/en-us/articles/360040030374-Copy-assets-between-design-tools) — SVG aktarımı ve marker/pattern içe aktarma sınırları. 7. [Canva — SVG düzenleyici](https://www.canva.com/features/svg-editor/) — belgelenmiş temel renk, boyut ve yerleşim işlemleri. 8. [PerfectVector — Fiyatlandırma politikası](https://perfectvector.com/pricing.md) — 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](https://perfectvector.com/tr/image-to-vector), ö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. ## Explore - [Read the HTML article](https://perfectvector.com/tr/blog/how-to-edit-an-svg) - [SVG sınırlayıcı kutuları: Doğru koordinatları ölçün](https://perfectvector.com/tr/blog/svg-bounding-box.md) - [SVG desen birimleri: Motifleri doğru boyutta tutun](https://perfectvector.com/tr/blog/svg-pattern-units.md) - [Product facts](https://perfectvector.com/product-facts.md) - [FAQ](https://perfectvector.com/faq.md) - [Pricing and credits](https://perfectvector.com/pricing.md)