SVG renklerini değiştirin, yaygın sorunları çözün

Bir SVG dosyasının rengini değiştirmenin üç gerçek yolu vardır ve hepsi ücretsizdir. Dosyayı çevrimiçi bir SVG renk değiştirme aracına yükleyip değiştirmek istediğiniz renk örneğine tıklayın. Inkscape gibi bir vektör uygulamasında açın, şekli seçin ve yeni bir dolgu belirleyin. Ya da dosyayı bir metin düzenleyicide açıp onaltılık renk kodunu değiştirin; çünkü SVG yalnızca metinden oluşur. Vektörün rengini değiştirmek ayrıca kayıpsızdır: Pikselleri yeniden boyamıyor, bir talimatı yeniden yazıyorsunuz. Bu nedenle hiçbir şey bulanıklaşmaz veya bozulmaz.

Hangi yöntemi seçeceğiniz, dosyanızın içeriğine bağlıdır. SVG'nin rengi değişmiyorsa bunun nedeni neredeyse her zaman kullandığınız araç değil, dosyanın içeriğidir. Bu rehber önce üç yöntemi, ardından teşhisi ele alır: Hiçbir renk aracının çözemeyeceği durum dahil, renk değişikliğinin uygulanmamasının altı yaygın nedeni.

SVG renklerini nerede tutar?

Bir SVG dosyası, metin olarak yazılmış şekiller listesidir. MDN'nin SVG dolgu ve kontur rehberinde açıklandığı gibi, her şeklin içi için bir fill, dış çizgisi için bir stroke değeri olabilir. Tek bir yerden değiştirebileceğiniz genel bir “görsel rengi” yoktur. Ekranda tek renk görünen bir tasarım, tek ve düzenli bir yoldan da oluşabilir, aynı dolguyu paylaşan kırk ayrı yoldan da.

İşin özü budur. Aşağıdaki her renk değiştirme yöntemi, şekilleri bulup fill veya stroke değerlerini yeniden yazmanın farklı bir yoludur. Sonuçların dosyadan dosyaya bu kadar değişmesinin nedeni de budur: Şekiller ne kadar az ve temizse renk değiştirmek o kadar kolaydır.

Yönteminizi seçin

Yöntem 1: Çevrimiçi SVG renk değiştirme aracı

1. Tarayıcınızda ücretsiz bir SVG renk aracı açın ve dosyayı yükleyin (iyi araçlar yapıştırılmış SVG kodunu da kabul eder).
2. Araç bulduğu renkleri listeler. İşe yarayan araçlar aynı dolguları gruplar; böylece “mavi”, onlarca şekli kapsasa bile tek bir renk örneği olur.
3. Bir renk örneğine tıklayın, yeni rengi seçin ve önizlemeyi izleyin.
4. Sonucu indirin ve doğrulamak için bir kez tarayıcı sekmesinde açın.

Bu, çoğu kişi için çoğu zaman doğru yöntemdir. Gerçek bir işte araca güvenmeden önce iki şeyi kontrol edin: Kontur renklerini de listeleyip listelemediğini ve renk geçişlerini nasıl işlediğini. Bir araç ekranda gördüğünüzden daha az renk gösteriyorsa dosyanın bir bölümü renk geçişi veya gömülü görseldir. Basit bir renk örneği değişikliği bu bölüme ulaşmaz.

Yöntem 2: Vektör tasarım uygulaması

Inkscape ücretsizdir ve bu iş için gereken her şeyi yapar; Illustrator ve Figma da aynı şekilde çalışır.

1. SVG'yi açın ve değiştirmek istediğiniz bölüme tıklayın. Tasarımın tamamı tek blok olarak seçiliyorsa gruplanmıştır: Gruba girmek için çift tıklayın veya grubu çözün.
2. Fill & Stroke panelinde (Inkscape) ya da dolgu renk örneğinde (Illustrator, Figma) dolguyu değiştirin.
3. Ekranda tek renk görünen bir alan çok sayıda şekle bölünmüşse bunlara tek tek tıklamayın. Inkscape'te bir şekle sağ tıklayıp Select Same → Fill Color kullanın veya Illustrator'ın belgelenmiş Select → Same → Fill Color komutunu kullanın. Artık bu dolguyu paylaşan her şekil seçilidir; tek değişiklik hepsinin rengini değiştirir.
4. Plain SVG biçiminde dışa aktarın veya kaydedin.

Bir tasarım uygulaması, şekilleri taşımak veya eğrileri yeniden işlemek gibi rengin ötesine geçeceğiniz işlemler için de kullanılır. Bu daha kapsamlı araçlar için SVG düzenleme rehberimize bakın.

Yöntem 3: Metin düzenleyici

SVG metin olduğu için her düzenleyici uygundur: Notepad, TextEdit, VS Code.

1. .svg dosyasını açın ve fill= arayın.
2. Değeri, örneğin fill="#1e3a5f" yerine fill="#c2410c" olacak şekilde değiştirip kaydedin.
3. Sonucu kontrol etmek için dosyayı tarayıcı sekmesinde yenileyin.

Üç noktaya dikkat edin. Renkler onaltılık kodların yanı sıra adlarıyla da yazılabilir (fill="black"). Dış çizgiler fill= değil, stroke= içinde bulunur. Ayrıca dışa aktarılan pek çok dosya rengi doğrudan şekle koymaz: Sınıflar kullanır ve asıl onaltılık kod üst kısma yakın bir <style> bloğunda yer alır (.st0{fill:#1e3a5f;}). Stil bloğundaki onaltılık kodu düzenlediğinizde o sınıfa sahip her şekil değişir.

Bu yöntem, tek bir bul ve değiştir işleminin yeterli olduğu tek renkli simgelerde ve bir klasördeki dosyaları toplu işlemek için çok uygundur. Kırk renkli bir illüstrasyon içinse yavaş bir yöntemdir.

SVG'niz bir web sitesindeyse

Bir SVG'nin rengini CSS ile değiştirebilir misiniz? En doğrudan yöntem, SVG işaretlemesini HTML içinde satır içi kullanmaktır. Bu durumda fill bir CSS özelliği gibi çalışır. Dolguları currentColor olarak ayarlamak, simgenin çevresindeki metnin rengini devralmasını sağlar. Haricî <img> olarak yüklenen SVG bir görsel olarak ele alınır; MDN, bu yapıda JavaScript'in SVG yapısını değiştiremeyeceğini belirtir. Sayfanın stilleri de içindeki yolları doğrudan seçemez.

Dosyayı satır içi kullanamıyorsanız yukarıdaki dosya düzenleme yöntemlerine dönersiniz: Rengi SVG'nin içinde değiştirip yeniden yükleyin. Sunum yöntemini seçmek için aynı grafik ve sayfa CSS testiyle satır içi SVG ile haricî görseli karşılaştırın.

Tek renkli bir arayüz silueti için SVG CSS maskeleri ve şeffaf simge şekilleri başka bir yol sunar: Kaynak görselin yol renklerine dokunmadan simge öğesini CSS ile boyayın.

Geri alınabilir bir renk efekti için feColorMatrix ile doğrudan dolgu düzenlemelerini karşılaştırın. Filtre, kaynağın renk tanımlarını koruyarak ekranda gösterilen renkleri değiştirir; bu, düzenlenebilir grafik teslim ederken önemlidir.

SVG'nizin rengi neden değişmiyor?

Eğitimlerin atladığı bölüm budur ve renk değiştirme işlemlerinin çoğu aslında burada başarısız olur. Tabloyu sırayla inceleyin.

Bunlardan ikisine daha yakından bakmak gerekir.

Beklenmedik arka plan kutusu

Bazı SVG'ler beyaz sayfada göremediğiniz, tam boyutlu bir arka plan dikdörtgeni içerir. “Her şeyin” rengini değiştirirseniz kutu tasarımınızın arkasında renkli bir blok olarak görünür. Bazı uygulamalar tıkladığınızda onu da seçer. Normal bir şekildir; dolayısıyla seçip silin veya gerçekten istediğiniz rengi verin. Kutu başka yazılımlarda beyaz görünüyorsa bu, bağlantılı ama farklı bir sorundur ve şeffaf arka planı koruma rehberimizde ele alınır.

Vektör olmayan SVG

İnatçı durum şöyle görünür: Hiçbir şekil seçilemez, dolgu düzenlemeleri hiçbir etki yaratmaz ve yakınlaştığınızda kenarlar pikselleşir. Dosyayı bir metin düzenleyicide açın; <path> öğeleri yerine uzun bir base64 metni içeren tek bir <image> etiketi bulursunuz. Bu, .svg kabuğuna yerleştirilmiş bir raster resimdir. Gerçekten vektörleştirme yapmayan dönüştürücüler bunları üretir. Yeniden boyanacak şekiller bulunmadığı için hiçbir renk aracı yardımcı olamaz. “Renklendirme” filtreleri yalnızca piksellere renk tonu verir; üstelik genellikle kötü sonuçla. İki dosya ekranda aynı görünür, ama kodda fark açıktır:

<!-- A real vector: a shape with a fill you can change -->
<path fill="#1e3a5f" d="M12 2 L22 20 H2 Z" />
 
<!-- A raster in an .svg shell: one sealed picture, no shapes -->
<image href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUg..." />

Çözüm, resmin kendisine, tercihen orijinal PNG veya JPG'ye dönüp onu gerçek yollar içeren gerçek bir vektöre dönüştürmektir. Hâlâ pikselli görünen SVG'ler rehberimiz bu sahte vektörlerin nasıl oluştuğunu ve birine güvenmeden önce onu nasıl tespit edeceğinizi ayrıntılı anlatır. Gerçek şekiller oluştuğunda bu rehberdeki her yöntem çalışmaya başlar.

Kesim dosyasını yeniden renklendirme: Her renk bir katmandır

Cricut veya Silhouette, SVG'nizdeki her rengi bir katman olarak ele alır. Her katman başka bir geçiş, başka bir malzeme tabakası ve daha fazla ayıklama demektir. Dolayısıyla kesim dosyasının rengini değiştirmek aslında katman planlamasıdır: İki öğeye aynı dolguyu vermek onları tek kesimde birleştirir; bir rengi bölmek ise yeni bir katman oluşturur.

Bu nedenle el işi yapanlar için bir düzenleme özellikle değerlidir: Neredeyse aynı renkleri birleştirmek. Vektörleştirilmiş grafiklerde sıkça, görsel olarak hiçbir katkı sağlamadan katman ekleyen, birbirine çok yakın üç mavi bulunur. Bunları tek renge indirdiğinizde dosya daha hızlı kesilir ve ayıklaması çok daha kolay olur. SVG paletini azaltma iş akışı, kontrastı veya işlem anlamını silmeden renkleri görsel rollerine göre nasıl birleştireceğinizi gösterir. Bilinçli olarak çok katmanlı tasarımlar oluşturuyorsanız katmanlı SVG rehberimiz iş akışının tamamını, Cricut SVG sayfası ise grafikleri kesim makineleri için hazırlamayı baştan sona ele alır.

Yeniden renklendirdikten sonra ayrı indirmelere ihtiyacınız varsa her tam renk değerini hizalanmış bir SVG dosyası olarak kaydedin.

PerfectVector ile bu nasıl görünür?

Önce bir sınırlamayı açıkça belirtelim: PerfectVector elinizdeki SVG dosyalarını düzenlemez. Görselleri (PNG, JPG, WebP) SVG'ye dönüştürür. Ancak “bu SVG'nin rengini nasıl değiştiririm?” sorunlarının şaşırtıcı ölçüde büyük bir kısmı bu dönüştürme adımından kaynaklanır: Size direnen dosya genellikle karmaşık bir vektör çizimdir veya hiç gerçek vektör değildir.

Bu yüzden SVG bir görselden oluşturulduysa ya da orijinal resim hâlâ elinizdeyse en temiz renk değişikliği kaynakta yapılır. Görseli düzenlenmek üzere hazırlanmış bir SVG'ye dönüştürün: temiz yollar, az düğüm ve her rengin ayrı, düzenlenebilir bir şekil olarak korunması. Ardından indirmeden önce yerleşik renk düzenleyiciyi kullanarak herhangi bir rengi değiştirin veya benzer renkleri birleştirin; yolları arayarak değil, renge göre. Tek işlemle hem istediğiniz paleti hem de daha basit bir dosyayı elde edersiniz. İlk dönüştürmeleriniz ücretsizdir, kredi kartı gerekmez.

Renk değiştirme neleri yapamaz?

• Renk geçişleri tek bir renk örneği değildir. Renk geçişi, renk durakları arasındaki bir geçiştir. Durakları düzenleyebilirsiniz; ancak basit bir “bu rengi değiştir” işlemi geçişin yalnızca bir bölümünü değiştirebilir. Renk geçişli grafiklerin basit bir değişimden sonra tuhaf görünmesinin nedeni budur.
• Ekran renkleri baskı renkleri değildir. SVG, ekrana yönelik renk talimatları saklar; baskı işi ise tam bir marka rengi, spot renk veya belirli bir siyah karışımı gerektirebilir. Dışa aktarma gördüğünüzü değiştiriyorsa paleti değiştirmeden önce SVG renk kaymasını teşhis edin. Renk konusunda belirleyici olan, matbaanın istediği üretim biçimidir.
• Renk değiştirmek geometriyi temizlemez. Yeni dolgular ince parçaları birleştirmez, boşlukları kapatmaz veya düğümleri azaltmaz. Yeni renkler taşıyan karmaşık bir vektör çizim hâlâ karmaşık bir vektör çizimdir.

Kaydetmeden önce

• Rengini değiştirdiğiniz dosyayı yeni bir tarayıcı sekmesinde açıp orijinaliyle karşılaştırın.
• Dış çizgileri kontrol edin: Konturlar, değişmesi gereken yerlerde dolgularla birlikte değişti mi?
• Yanlışlıkla rengini değiştirmiş olabileceğiniz fazladan bir arka plan dikdörtgeni arayın.
• Kesim dosyalarında renkleri birleştirdikten sonra katmanları sayın; daha az olması neredeyse her zaman daha iyidir.
• Orijinal dosyanın dokunulmamış bir kopyasını saklayın.

Sık sorulan sorular

Illustrator veya Photoshop olmadan bir SVG dosyasının rengini nasıl değiştiririm? Ücretsiz bir çevrimiçi SVG renk değiştirme aracı (yükleyin, renk örneğine tıklayın, indirin) veya ücretsiz bir masaüstü vektör düzenleyicisi olan Inkscape kullanın. Tek renkli bir simge için dosyayı herhangi bir metin düzenleyicide açıp fill= sonrasındaki onaltılık değeri değiştirmek de işe yarar. Bunların hiçbiri ücretli değildir.

Ne denesem de SVG'm neden siyah kalıyor? Bir web sitesindeyse CSS, img etiketiyle yüklenen bir SVG'yi yeniden biçimlendiremez; satır içi kullanın veya dosyayı düzenleyin. Bir düzenleyicideyse seçimi engelleyen bir grup, rengi sağlayan bir kontur veya stil bloğunda tanımlanmış renkler olup olmadığını kontrol edin. Hiçbir şey seçilemiyorsa ve yakınlaştığınızda pikseller görünüyorsa dosya, .svg içine yerleştirilmiş bir raster görüntüdür ve yeniden renklendirilecek şekli yoktur.

Canva'da bir SVG'nin rengini değiştirebilir misiniz? Canva'nın özel SVG düzenleyicisi, SVG'yi ücretsiz ve filigransız yükleyip yeniden renklendirebileceğinizi ve indirebileceğinizi belirtir. Karmaşık SVG özellikleri yine de farklı düzenleyicilerde farklı görüntülenebilir; bu nedenle orijinalin yerine koymadan önce indirdiğiniz dosyayı inceleyin.

Bir SVG dosyası birden fazla renk kullanabilir mi? Evet. Dosyadaki her şekil kendi dolgusunu ve konturunu taşır; bu yüzden bir SVG, renk geçişlerine ek olarak şekil sayısı kadar renk barındırabilir. Çok renkli grafiklerin rengini değiştirmenin tek bir genel ayarı değil, birkaç dolguyu değiştirmek anlamına gelmesinin nedeni de budur.

Bir Cricut projesi için SVG renklerini nasıl değiştiririm? Cricut Design Space içinde katmanların rengini değiştirebilirsiniz; ancak renk değişikliği şekil başına değil, katman başına uygulanır. Hangi parçaların aynı rengi paylaşacağını ve dolayısıyla birlikte kesileceğini yeniden düzenlemek için SVG'yi yüklemeden önce düzenleyin: Aynı katmanda olmasını istediğiniz renkleri birleştirin, ayrı kesilmesi gereken her şeye ayrı bir dolgu verin.

SVG'nin rengini değiştirmek kaliteyi düşürür mü? Hayır. Vektörün rengi metin içindeki bir talimattır; dolayısıyla rengi değiştirmek geometriye dokunmadan talimatı yeniden yazar. PNG düzenlemenin aksine, SVG'nin rengini hiçbir kalite kaybı olmadan istediğiniz kadar değiştirebilirsiniz.

Kaynaklar

1. MDN: SVG fills and strokes — fill, stroke, opaklık ve ilgili SVG boyama özelliklerini açıklar.
2. MDN: Adding vector graphics to the web — Satır içi SVG ile <img> üzerinden yüklenen SVG'yi karşılaştırır.
3. Adobe Illustrator: Select objects with the same fill and stroke — Ortak boyama özelliklerine göre grafik seçmeyi belgeler.
4. W3C: SVG 2 embedded content — SVG belgelerindeki raster <image> içeriğini tanımlar.
5. Canva: SVG editor — Canva'nın SVG yükleme, yeniden renklendirme ve indirme iddiaları için güncel kaynak.

Dosya sorunsuz çalıştığında SVG'nin rengini değiştirmek hızlıdır: Elinizdeki dosyaya uygun yöntemi seçin ve araçlarınızla mücadele etmeden önce sorunu teşhis edin. Sorun dosyanın kendisiyse mücadeleyi atlayın. Orijinal görseli temiz, düzenlenebilir bir SVG'ye dönüştürün ve renklerinizi değiştirmek hâlâ kolayken seçin.