SVG Görüntüleyici

SVG Girişi
0 karakter
Yerel önizleme, güvenmediğiniz kaynaklardan betik içeriği yapıştırmayın

Çevrimiçi SVG görüntüleyici. SVG kodunu yapıştırın, vektör görüntüyü gerçek zamanlı olarak anında render edin ve önizleyin. Kopyalama ve .svg dosya indirme destekler. Yerel işleme — güvenle kullanın.

İlgili Öneriler

Resim Dönüştürme

Resim Sıkıştırma

Resim Boyutlandırma

Resim Kırpma

gorsel duzenleyici

ICO olusturucu

SVG nedir?

SVG (Scalable Vector Graphics, ölçeklenebilir vektör grafikleri), XML kullanarak geometrik şekilleri tanımlayan bir görüntü formatıdır. JPG ve PNG gibi bitmap (piksel matrisi) formatlarının aksine, SVG <rect>, <circle>, <path> gibi etiketleri kullanarak şekillerin matematiksel yollarını tanımlar, bu nedenle herhangi bir boyuta ölçeklendiğinde bulanıklaşmaz.

**SVG hangi senaryolar için uygundur?** Logolar, UI ikonları, akış şemaları, harita işaretçileri, grafikler, animasyonlu süslemeler, yeniden kullanılabilir illüstrasyonlar — bu senaryolarda netlik, renk değiştirme, ölçeklenebilirlik ve CSS ile kontrol gereksinimleri yüksektir, bu nedenle SVG doğal bir seçimdir.

**Canvas'tan farkı:** Canvas komut temelli bir çizim API'sidir, çizimden sonra her şey piksel olur; SVG bildirim temelli DOM düğümleridir, öznitelikleri ve CSS stillerini istediğiniz zaman değiştirebilir ve olayları bağlayabilirsiniz. Bu nedenle ikonlar, UI ve etkileşimli senaryolar için SVG, oyunlar, parçacıklar ve piksel sanatı için Canvas kullanın.

**Tipik yapı:** &lt;svg&gt; kök düğümü, &lt;g&gt; gruplama, &lt;path&gt; yol (en sık kullanılan, d özniteliğini içerir), gradyanlar (&lt;linearGradient&gt;/&lt;radialGradient&gt;), filtreler (&lt;filter&gt;), animasyon (SMIL/CSS/JS).

**Nasıl önizlenir?** Bu araçla SVG kaynak kodunu düzenleyiciye yapıştırın — sağda gerçek zamanlı olarak render edilecektir. Sürüklenebilir ayırıcı sayesinde SVG kodunun doğru olup olmadığını ve görüntü efektinin beklentilere uygun olup olmadığını birkaç saniye içinde kontrol edebilirsiniz.

Kullanım senaryoları

  • Frontend geliştiricilerin SVG ikon kodunun render sonucunu hızlıca önizlemesi gerektiğinde
  • Figma, Sketch ve diğer tasarım araçlarından kopyalanan SVG'nin görüntü efektini doğrulamak için
  • SVG yollarını, renklerini veya viewBox özniteliğini hatalarını ayıklarken değişiklikleri gerçek zamanlı olarak görmek için
  • Proje koduna entegre etmeden önce SVG kodunu kontrol etmek ve doğrulamak için

Nasıl Kullanılır

  1. SVG kaynak kodunu sol düzenleyiciye yapıştırın veya demoyu görmek için «Örnek Yükle»ye tıklayın
  2. Sağda vektör görüntünün render sonucu anında görüntülenecektir, kodu düzenlerken önizleme gerçek zamanlı olarak güncellenir
  3. Kontrol ettikten sonra kodu kopyalamak için kopyala düğmesine tıklayın veya özelleştirilmiş dosya adıyla .svg dosyası olarak indirin

Özellikler

  • Gerçek zamanlı önizleme: SVG kodunu yapıştırın veya düzenleyin — vektör görüntü anında render edilir, WYSIWYG
  • Bölünmüş düzen: Masaüstünde sürükleyerek panel genişliğini ayarlayın, mobilde sekmelerle giriş ve önizleme arasında geçiş yapın
  • Tek tıkla dışa aktarma: SVG kaynak kodunu panoya kopyalayın veya özelleştirilmiş dosya adıyla standart .svg dosyası olarak indirin
  • Yerel işleme: Tüm SVG ayrıştırma ve işleme tarayıcıda gerçekleşir, kod sunucuya yüklenmez — daha güvenli
  • Saydam arka plan: Damalı arka plan, SVG'nin saydam alanlarını ve kenar detaylarını net olarak görmenizi sağlar
  • Karakter sayacı: Kodun karakter sayısını gerçek zamanlı olarak gösterir, yerleşik örneklerle hızlıca başlayın

Sık Sorulan Sorular

SVG kodunun etkisini çevrimiçi nasıl önizlerim?

SVG kaynak kodunu sol düzenleyiciye yapıştırın, sağda vektör görüntü anında render edilecektir. Kodu doğrudan düzenleyicide düzenleyebilirsiniz, önizleme alanı gerçek zamanlı olarak yenilenir — ikon hatalarını ayıklama ve efektleri doğrulama için kullanışlıdır.

Önizlenen SVG'yi nasıl indirip kaydederim?

Önizleme alanının sağ üst köşesindeki indirme düğmesine tıklayın, dosya adını belirleyin ve standart .svg dosyası olarak kaydedin. Ayrıca kopyala düğmesine tıklayarak SVG kaynak kodunu panoya kopyalayabilir ve proje koduna doğrudan yapıştırabilirsiniz.

SVG kodu sunucuya yüklenir mi? Güvenli mi?

Hayır. Tüm SVG ayrıştırma ve işleme yerel tarayıcıda gerçekleşir, SVG kodu hiçbir sunucuya yüklenmez. İşlemden sonra veriler hemen bellekten silinir, yayınlanmamış ikon materyalleri ve tasarım taslaklarının sızıntı riskini ortadan kaldırır.

Tasarım programlarından kopyalanan SVG kodu destekleniyor mu?

Evet. Figma, Sketch, Adobe Illustrator ve diğer tasarım programlarından kopyalanan SVG kodu doğrudan yapıştırılarak önizlenebilir. Render sonucunu önce kontrol etmeniz, sorun yoksa projeye entegre etmeniz önerilir.

SVG önizlemesi neden görünmüyor? Yaygın nedenler?

Yaygın nedenler: ① xmlns="http://www.w3.org/2000/svg" ad alanı bildiriminin eksikliği; ② kodda kapatılmamış etiketler; ③ özel karakterlerin doğru şekilde kaçış karakteriyle işlenmemesi; ④ SVG'nin kendisindeki sözdizimi hataları. Bu maddeleri kontrol edin.

İndirilen SVG dosyasının adını özelleştirebilir miyim?

Evet. İndirme düğmesine tıkladığınızda dosya adı giriş kutusu görünecektir, istediğiniz adı girin (varsayılan image.svg), Enter tuşuna basın veya onaylayın — dosya indirilecektir. Araç otomatik olarak .svg uzantısını ekler.

Sözlük

viewBox
SVG'nin dahili koordinat sistemi, «x y width height» biçiminde belirtilir. Yaygın olarak kullanılan «0 0 24 24», genişlik ve yüksekliğin 24 birim olduğu anlamına gelir. SVG'nin gerçek görüntü boyutu width/height öznitelikleri veya harici CSS ile kontrol edilir.
XML ad alanı (namespace)
Tarayıcının SVG'yi bir SVG belgesi olarak doğru tanıması için xmlns="http://www.w3.org/2000/svg" bildirimi gereklidir. Ad alanı eksikliği, HTML'de SVG'nin görünmemesinin en yaygın nedenidir.MDN - SVG Ad Alanı
path d özniteliği
M/L/C/Q/H/V/Z gibi harfler ve koordinatlardan oluşan yol komutları setidir. M=hareket et, L=çizgi çiz, C=kübik Bezier eğrisi, Q=kuadratik Bezier eğrisi, Z=yolu kapat. Karmaşık ikonlar genellikle tek bir path öğesi ve onun d özniteliğiyle ifade edilir.
currentColor
Geçerli öğenin color özelliğine başvuran CSS anahtar kelimesi. SVG'de fill veya stroke'u currentColor olarak ayarlarsanız, harici CSS'deki color değişikliği ikonun rengini değiştirir — bu tasarım sistemlerinde yaygın bir uygulamadır.

Sık kullanılan SVG öğeleri hızlı başvuru

ÖğeTürAmaç
<svg>Kök düğümTüm SVG'nin kapsayıcısı, zorunlu
<rect>Temel şekilDikdörtgen, köşeleri yuvarlatılmış dikdörtgen
<circle> / <ellipse>Temel şekilÇember / Elips
<line> / <polyline>Temel şekilDüz çizgi / Kırık çizgi
<polygon> / <path>YolÇokgen / İsteğe bağlı eğri (d özniteliği)
<text> / <tspan>MetinSVG gömülü metin
<g>GruplamaDüğümleri gruplayarak toplu dönüşüm uygulama
<defs> / <symbol>TanımlarYeniden kullanılabilir şekiller ve gradyanlar
<linearGradient> / <radialGradient>GradyanDoğrusal / Dairesel gradyan dolgu
<use>Yeniden kullanımdefs içindeki öğeye başvurma
<filter>FiltreBulanıklık, gölge ve diğer gelişmiş efektler

SVG ve bitmap formatları karşılaştırması

ParametreSVG (vektör)PNG (bitmap)JPG (bitmap)
Temsil biçimiXML geometrik yolları tanımlarPiksel matrisiPiksel matrisi (DCT sıkıştırma)
Büyütme etkisiHer ölçekte bulanıklaşmazBüyütünce bulanıklaşırBüyütünce bulanıklaşır, sıkıştırma izleri belirginleşir
Dosya boyutuYol karmaşıklığına bağlı, logolar genellikle < 10KBOrta (kayıpsız)Küçük (kayıplı)
Saydam arka plan✅✅❌
Animasyon desteği✅ SMIL / CSS / JS❌ (APNG gerekir)❌
CSS ile renk değiştirme✅ currentColor / fill değişkenleri❌❌
Uygun kullanım alanlarıİkonlar, logolar, UI vektörleriSaydam arka planlı materyaller, ekran görüntüleriFotoğraflar, geniş gradyanlar

Authoritative References