PicScrub logoPicScrub
Formatlara dön

SVG formatı

Scalable Vector Graphics

XML yapısı

SVG, bu sitedeki diğer bütün formatlardan ayrılıyor: ikili değil, düpedüz XML metni. Bir SVG dosyasını metin düzenleyicide açıp okuyabilirsin. Bu, meta veri silmeyi kavramsal olarak kolaylaştırıyor ama aynı zamanda bilginin saklanabileceği daha çok yer var demek.

Meta veri; kendine ait öğeler, herhangi bir öğeye eklenmiş nitelikler, XML yorumları ya da işleme yönergeleri olarak karşına çıkabilir. Vektör editörleri de kendi verilerini SVG dosyalarına tıkıştırmaya bayılır.

Temel SVG yapısı

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     width="100" height="100" viewBox="0 0 100 100">

  <!-- Meta veri öğeleri -->
  <title>Çizimim</title>
  <desc>Ahmet Yılmaz tarafından oluşturuldu</desc>
  <metadata>
    <rdf:RDF xmlns:rdf="...">
      <!-- RDF/Dublin Core meta verisi -->
    </rdf:RDF>
  </metadata>

  <!-- Vektör içeriği -->
  <circle cx="50" cy="50" r="40" fill="red"/>
</svg>

Öne çıkan öğeler

  • <svg>:viewBox ve boyutları taşıyan kök öğe
  • xmlns:Ad alanı bildirimleri
  • <defs>:Yeniden kullanılabilir tanımlar (gradyanlar, desenler)
  • <g>:Gruplama öğesi

Meta veri öğeleri

SVG standardı meta veri eklemek için birkaç farklı yol tanımlıyor ve her araç farklı bir yolu seçiyor. Bazıları çok bariz (resmen bir <metadata> öğesi var), bazıları daha sinsi.

<metadata>

Genellikle RDF/Dublin Core biçiminde yapılandırılmış meta veri kabı. İçinde dosyayı oluşturanın adı, oluşturma tarihi, haklar ve daha fazlası bulunabilir.

<metadata>
  <rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
           xmlns:dc="http://purl.org/dc/elements/1.1/">
    <rdf:Description>
      <dc:creator>Ahmet Yılmaz</dc:creator>
      <dc:date>2024-01-15</dc:date>
    </rdf:Description>
  </rdf:RDF>
</metadata>

<title>

SVG dosyasının ya da tek tek öğelerin insan tarafından okunabilir başlığı. Çoğunlukla erişilebilirlik için kullanılır ama belgenin ne işe yaradığını ele verebilir.

<desc>

Açıklama öğesi. Görsel, onu oluşturan kişi ya da dosyanın amacı hakkında ayrıntılı bilgi içerebilir.

XML yorumları

<!-- yorum --> içinde yazarın notları, oluşturma tarihleri, yazılım bilgisi ya da hata ayıklama notları bulunabilir.

Editör ad alanları

SVG'nin dağıldığı yer burası. Her vektör editörü, SVG'nin doğrudan desteklemediği özellikleri saklamak için kendi ad alanına ait nitelikleri ekliyor. Bir Inkscape dosyasını aç, her yerde inkscape: ve sodipodi: nitelikleri göreceksin. Bunlar tek başına gizlilik riski sayılmaz ama hangi yazılımı kullandığını açık ediyorlar.

inkscape:* / sodipodi:*

Inkscape; katman adları, kılavuz konumları, belge ayarları ve düzenleme geçmişi için kendi ad alanına ait nitelikler ekler.

<svg xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
     xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
     inkscape:version="1.2"
     sodipodi:docname="my-drawing.svg">
  <sodipodi:namedview inkscape:current-layer="layer1"/>
</svg>

Adobe Illustrator

Illustrator; sürüm bilgisi, çalışma yüzeyi ayarları ve bazen AI formatının tamamına ait veriler dahil kapsamlı bir meta veri gömer.

xmlns:i="http://ns.adobe.com/AdobeIllustrator/10.0/"
xmlns:x="http://ns.adobe.com/Extensibility/1.0/"

Sketch / Figma

Modern tasarım araçları katman adlarını, bileşen kimliklerini ve dışa aktarma ayarlarını özel niteliklere gömebilir.

İşleme yönergeleri

SVG dosyalarının başındaki XML işleme yönergeleri (<?...?>) hangi yazılımın kullanıldığını ele verebilir.

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/css" href="style.css"?>
<!-- Inkscape ile oluşturuldu (http://www.inkscape.org/) -->

Korunanlar ve silinenler

  • • <?xml ...?> bildirimi:Korunur (zorunlu)
  • • <?xml-stylesheet ...?>:Korunur (işlevsel)
  • • Diğer işleme yönergeleri:Silinir

DOM tabanlı işleme

SVG geçerli bir XML olduğu için onu bir DOM ağacına çözümleyip istemediğimiz kısımları cerrahi hassasiyetle çıkarabiliyoruz. Bu yöntem, regex tabanlı yaklaşımlardan çok daha hassas ve geçerli içeriği yanlışlıkla bozmuyor.

1

XML'i çözümle

SVG dosyasını yapısını koruyarak XML belgesi olarak çözümle

2

Meta veri öğelerini sil

<metadata>, <title>, <desc> öğelerini kaldır

3

Editör niteliklerini ayıkla

inkscape:*, sodipodi:* ve diğer editör ad alanlarını sil

4

Yorumları sil

Belgedeki bütün XML yorumlarını temizle

5

Ad alanlarını temizle

Kök öğedeki kullanılmayan ad alanı bildirimlerini kaldır

6

Serileştir

Temizlenmiş XML'i tekrar SVG dosyası olarak yaz

İşleme özeti

Korunanlar

  • • Bütün vektör grafikler (yollar, şekiller, metin)
  • • Stiller ve CSS
  • • Gradyanlar ve desenler
  • • Filtreler ve efektler
  • • Gömülü görseller (referans verilenler)
  • • viewBox ve boyutlar
  • • Standart SVG ad alanları

Silinenler

  • • <metadata> öğesi
  • • <title> öğesi
  • • <desc> öğesi
  • • XML yorumları
  • • inkscape:* nitelikleri
  • • sodipodi:* nitelikleri
  • • Adobe/Sketch ad alanları
  • • Kullanılmayan ad alanı bildirimleri

Gömülü görseller

İnsanları hazırlıksız yakalayan bir ayrıntı: SVG dosyaları raster görselleri base64 data URI olarak içine gömebilir. O gömülü JPEG ya da PNG dosyalarının içinde kendi EXIF meta verileri saklanıyor olabilir.

Şu anki kısıt

PicScrub şu anda SVG düzeyindeki meta verileri siliyor ama gömülü raster görselleri çözüp işlemiyor:

<image href="data:image/jpeg;base64,/9j/4AAQ..." />

PicScrub şu an SVG dosyalarının içindeki raster görselleri işlemiyor. Tam gizlilik istiyorsan gömülü görselleri ayrı ayrı çıkarıp işlemen gerekir.