SVG Düzenleyici / Önizleyici
SVG kodunuzu yapıştırın; sonucu anında canlı önizleyin. Kodu düzenledikçe görsel güncellensin, arka plan rengini deneyin, SVG dosyası olarak indirin veya kodu kopyalayın.
SVG Düzenleyici / Önizleyici nedir, ne işe yarar?
SVG düzenleyici, vektörel görsel kodunu (SVG) yapıştırıp sonucunu canlı önizleyerek düzenlemenizi sağlayan araçtır. Kodda yaptığınız her değişiklik anında görsele yansır; renk, boyut veya yol verilerini deneyerek ayarlayabilirsiniz.
Bu araçta SVG, betik çalıştırmayan yalıtılmış bir görsel olarak gösterilir; kod içindeki olası script'ler çalışmaz. Sonucu SVG dosyası olarak indirebilir veya kodu kopyalayabilirsiniz. Her şey tarayıcınızda çalışır.
SVG Düzenleyici / Önizleyici nasıl yapılır?
- SVG kodunuzu sol alana yapıştırın.
- Sağdaki canlı önizlemede sonucu anında görün; arka planı deneyin.
- SVG dosyası olarak indirin veya kodu kopyalayın.
Nerelerde kullanılır?
- Bir ikon veya logonun rengini hızlıca değiştirmek
- SVG kodundaki bir hatayı bulup düzeltmek
- Kopyaladığınız SVG'yi indirmeden önce önizlemek
- viewBox veya boyut değerlerini deneyerek ayarlamak
İpuçları
- Boyutu değiştirmek için width/height yerine viewBox ile oynamak ölçeği korur.
- Arka plan seçeneğiyle şeffaf SVG'nin koyu/açık zeminde nasıl durduğunu test edin.
- Dosya boyutunu küçültmek için sonrasında SVG Optimize aracını kullanın.
SVG bir metin dosyasıdır
SVG'yi not defterinde açabilirsiniz; içinde HTML'e benzeyen etiketler görürsünüz. Bu, düzenlemeyi şaşırtıcı derecede kolaylaştırır: bir logonun rengini değiştirmek için tasarım programı açmanız gerekmez, dosyadaki renk kodunu bulup değiştirmeniz yeterlidir.
Dolgu rengi, kenar çizgisi rengi ve kalınlığı, saydamlık ve çizimin koordinat alanı hep bu etiketlerde tanımlıdır. Önizlemede değişikliği anında gördüğünüz için deneme yanılma hızlı ilerler.
Renk değişikliğinde sık karşılaşılan durum
Bazı çizimler onlarca ayrı parçadan oluşur ve her parçanın kendi dolgu rengi vardır. Tek bir değeri değiştirdiğinizde logonun yalnızca bir bölümü değişir; hepsini değiştirmek için tüm dolgu tanımlarını bulmanız gerekir.
Bazı SVG'lerde renk gradyan olarak tanımlıdır ve dolgu doğrudan bir renk değil, gradyan tanımına yapılan bir gönderme taşır. Bu durumda rengi değiştirmek için gradyan tanımının içindeki durakları düzenlemek gerekir.
Görüntü alanı ve boyut ilişkisi
SVG'de çizimin koordinat alanı ile dosyanın görüntülenme boyutu birbirinden bağımsızdır. Koordinat alanı çizimin iç ölçü sistemidir; genişlik ve yükseklik ise ekranda ne kadar yer kaplayacağını belirler.
Bu ayrımı bilmek, logonun neden beklediğinizden küçük veya kırpılmış göründüğünü açıklar. Genellikle sorun çizimde değil, koordinat alanının yanlış tanımlanmış olmasındadır. Düzenleme tarayıcınızda yapılır; dosyanız hiçbir sunucuya gönderilmez.
Sık sorulan sorular
Önizleme güvenli mi?
Evet. SVG, betik çalıştırmayan yalıtılmış bir görsel olarak (img etiketiyle) gösterilir; kod içindeki olası script'ler çalışmaz.
Kodum bozuksa ne olur?
Geçersiz SVG önizlemede görünmez; kodu düzelttikçe önizleme güncellenir. Hiçbir şey kaydedilmez.
Boyutu nasıl değiştiririm?
SVG'nin width/height veya viewBox değerlerini kod içinde düzenleyin; önizleme anında yansıtır.