Tasarımcı size logo.svg gönderdi ve siz de çift tıkladınız. Bazı bilgisayarlarda tarayıcı açılıyor, bazılarında “bu dosyayı hangi programla açmak istersiniz?” penceresi çıkıyor. Bir noktada bu dosyanın rengini değiştirmek ya da boyutunu ayarlamak isteyeceksiniz ve nereden başlayacağınızı bilemeyeceksiniz.
İyi haber: SVG’yi açmak ve basit düzenlemeler yapmak için tasarımcı olmanıza gerek yok. Elinizdeki araçlarla çoğu şeyi halledebilirsiniz. Ne zaman profesyonel yardıma ihtiyacınız olduğunu da aşağıda anlatıyoruz.
Açmanın en kolay yolu: tarayıcı
Chrome, Edge, Firefox ve Safari SVG dosyalarını doğrudan gösteriyor. Dosyayı tarayıcı penceresine sürükleyin, logo açılır. Bu, dosyanın bozuk olup olmadığını anlamak için en hızlı test. Sayfayı yakınlaştırarak (Ctrl ve artı tuşu) kenarların keskin kalıp kalmadığına da bakabilirsiniz.
Tarayıcıda açılan SVG’yi kaydetmeye kalkmayın; sağ tıklayıp “farklı kaydet” çoğu zaman aynı dosyayı veriyor ama ekran görüntüsü almak, vektör bilgisini yok ediyor. Dosyayı yalnızca görmek için tarayıcıyı, düzenlemek için başka araçları kullanın.
Ofis programlarında
Word ve PowerPoint’in yeni sürümleri “Ekle > Resimler” yoluyla SVG dosyalarını içeri alabiliyor ve vektör olarak tutuyor. Bu durumda logoyu büyütüp küçültebilir, hatta renklerini “Grafik Biçimi” menüsünden değiştirebilirsiniz. Eski sürümlerde SVG desteklenmeyebilir; bu durumda dosya eklenemez ya da boş görünür.
Böyle bir durumda yapılacak şey, aynı logonun PNG sürümünü kullanmak. PNG’yi yüksek çözünürlükte (örneğin 2000 piksel genişlikte) istemek, Word belgelerinde bulanıklığı önler. Google Dokümanlar ve Slaytlar ise SVG’yi doğrudan eklemeyi desteklemez; orada da PNG kullanmak zorunda kalırsınız.
Tasarım programlarında
Vektör düzenleme için profesyonel araçlar var: Illustrator, Affinity Designer, Inkscape (ücretsiz), Figma (çevrimiçi ve bir ölçüde ücretsiz). Bunların hepsi SVG’yi açıp şekilleri tek tek düzenlemenize izin veriyor.
Yeni başlayanlar için Figma ya da Inkscape mantıklı: dosyayı içeri aktarın, bir şekle tıklayın, rengini değiştirin, dışa aktarın. Renk değişimi için genellikle sağ paneldeki “dolgu” (fill) alanına yeni bir HEX kodu yazmak yetiyor. Logonun birkaç parçası varsa, her birini ayrı ayrı seçmeniz gerekebilir.
Rengi değiştirmek: en sık düzenleme
En çok yapılan iş, logonun rengini değiştirmek: koyu zemin için beyaz, tek renkli baskı için siyah gibi. Bunu yapmadan önce mutlaka orijinal dosyayı kopyalayın; “logo-renkli.svg” ile “logo-beyaz.svg” ayrı dosyalar olsun. Orijinali bozmamak ve marka rehberinde tanımlı renkleri kullanmak önemli.
Rengi keyfî seçmeyin; rehberdeki onaylı HEX kodunu kullanın. Yalnızca “yaklaşık aynı” bir renk, zamanla markanın tutarlılığını bozuyor. Rehberiniz yoksa, en azından logonun ana renk kodunu bir yere not edin.
Boyutunu ayarlamak
SVG’nin boyutu değişse de kalitesi bozulmaz; ama oran bozulabilir. Yeniden boyutlandırırken oranı kilitleyin (çoğu programda köşeden çekerken Shift tuşuna basılı tutmak yeterli). Yatay ve uzun bir logoyu kare bir alana sığdırmaya çalışmak yerine, dikey ya da kare sürümünü kullanın.
Bir de “artboard” (sayfa alanı) meselesi var: bazı SVG’lerin etrafında görünmez boşluk olabiliyor. Logoyu sayfaya yerleştirdiğinizde beklenmedik kenar boşlukları görürseniz, dosyanın sayfa alanını içeriğe sıkıştırmak gerekir. Bu, tasarımcının bir dakikalık işi.
Yazı tipi tuzağı: metin dosyada durursa
SVG’lerde bazen logodaki harfler “metin” olarak kalmış oluyor, yani şekil değil, yazı tipiyle çizilecek harfler. Bu dosyayı yazı tipi yüklü olmayan bir bilgisayarda açtığınızda harfler başka bir yazı tipiyle görünüyor ve logo bozuluyor. Profesyonel tasarımcılar bunu önlemek için harfleri “eğriye çevirir” (outline); yani harfler şekle dönüşür ve yazı tipi bağımlılığı kalmaz.
Elinizdeki SVG’de logo yazısı garip bir yazı tipiyle görünüyorsa, sorun büyük ihtimalle budur. Tasarımcıdan “harfler eğriye çevrilmiş sürümü” isteyin. Bu istek, teknik bir terim gibi duruyor ama tasarımcı hemen anlar.
İndirilen SVG’lerde güvenlik notu
Bir SVG dosyası kod içerebildiği için, tanımadığınız kaynaklardan indirdiğiniz SVG’leri doğrudan sitenize yüklemeyin. Kötü niyetli bir SVG, teorik olarak sayfaya istenmeyen kod taşıyabilir. Kendi tasarımcınızdan ya da güvenilir bir kaynaktan gelen dosyalar sorun değil; ama internetten bulduğunuz bir ikon setini yüklemeden önce bir geliştiriciye kontrol ettirin. Web sitenize dosya yükleme panelinde SVG desteği kapalıysa, bunun sebebi çoğunlukla bu önlemdir.
Dışa aktarırken dikkat edilecekler
Düzenlemeyi bitirdikten sonra dosyayı dışa aktarırken, “SVG 1.1” ya da “optimize edilmiş SVG” gibi seçenekleri tercih edin. Fazladan katmanları ve gizli öğeleri temizleyen seçenekler dosyayı küçültüyor. Dosyayı kaydettikten sonra tarayıcıda açıp kontrol edin: renkler doğru mu, kenarlar temiz mi, boşluklar beklendiği gibi mi? Ayrıca dosya adını anlamlı verin: “marka-logo-yatay-beyaz.svg” gibi. Aylar sonra hangi dosyanın ne olduğunu ad söylüyor.
Kod bilenler için: Not Defteri ile
SVG bir metin dosyası olduğu için Not Defteri’yle açılıp içindeki renk kodları görülebilir. “fill” ifadesinin yanındaki HEX kodunu değiştirerek rengi elle güncelleyebilirsiniz. Ufak bir değişiklik için bu, en hızlı yol olabilir. Ama dikkatli olun: yanlış bir karakter silmek dosyayı bozar. Yine önce kopya alın.
Bu yöntem, web geliştiricilerin SVG’yi neden sevdiğini de gösteriyor: renk ve boyut kodla kontrol edilebiliyor. Web tarafındaki kullanım için web tasarım hizmetimizde bu ayrıntıları uyguluyoruz.
Ne zaman profesyonel yardım almalısınız?
Şu durumlarda kendi başınıza uğraşmayın:
- Logo birden fazla renkli ve gradyanlı ise ve renk değişimi kalitesini bozuyorsa.
- Dosya açıldığında bulanık ya da bozuk görünüyorsa; bu, içindeki şeyin gerçek vektör olmadığını gösterebilir.
- Baskı için dosya hazırlıyorsanız ve CMYK ya da özel renk (Pantone) ayarı gerekiyorsa.
- Logoyu farklı formatlarda (kare, dikey, tek renkli) yeniden düzenlemek istiyorsanız.
Bu durumlarda hata yapmanın maliyeti, bir tasarımcıya ödeyeceğiniz küçük ücretten yüksek olabilir. Dosya formatlarının genel resmi için SVG’nin PNG ve JPG’den farkını anlattığımız yazıya da bakabilirsiniz.
Düzenleme sırasında sık yapılan üç hata
Birincisi, orijinal dosyanın üzerine kaydetmek. Bir hata yaparsanız geri dönüşünüz kalmıyor; her zaman “farklı kaydet” kullanın. İkincisi, renkleri gözle seçmek. Ekranda “aynı görünen” iki mavi, baskıda ve farklı ekranlarda ayrışıyor; kod kullanın. Üçüncüsü, logonun oranını bozarak boyutlandırmak. Yatay çekip sıkıştırılmış bir logo, markanın tanınırlığını sessizce zedeliyor ve çoğu zaman kimse ne zaman bozulduğunu hatırlamıyor.
Bunları önlemek için düzenleme yapacak kişiye şu kısa notu verin: “Orijinal dosya duruyor, kopya üzerinde çalış; renkler rehberdeki kodlarla, oran kilitli.” Üç cümle, çoğu hatayı engelliyor.
Elinizdeki dosyayı gösterin
Elinizde açılmayan, bozuk görünen ya da düzenlemek istediğiniz bir SVG varsa, iletişim sayfamızdan bize gönderebilirsiniz. WhatsApp’tan 0540 022 64 22 numarasına da yazabilirsiniz; dosyaya bakıp ne yapılabileceğini söyleyelim. Çoğu zaman bir renk değişimi ya da yeni bir sürüm çıkarmak birkaç dakikalık bir iş.