SVG.js: Çizim Alın, Yolu Düzenleyin, SVG Dışa Aktarın

Parça düzeyinde düzenleme için SVG.js'ye çizim almak üzere güvenilir SVG işaretlemesini .svg() işlevine verin, oluşturulmuş kimliğiyle amaçlanan öğeyi bulun ve dolgusunu değiştirin. Bağımsız dosya için çizimin tam SVG kökünü dışa aktarın. Yalnız alt öğe çıktısı parçadır; belge olarak teslim etmeden önce amaçlanan boyutları ve viewBox değeri olan kök gerekir.

Bu kılavuz özgün delikli eşkenar dörtgen ve ayrı üçgen kullanır. Üçgen aşı boyasından mercan rengine değişirken eşkenar dörtgen koyu turkuaz dolgusunu ve açıklığını korur. Aşağıdaki eksiksiz örneği resmî 3.2.6 sürümüne sabitlenmiş SVG.js 3.2.6 ile sınadık. Bu gözlemler başka SVG'nin içerebileceği her özellikle değil, iki basit özgün yolla ilgilidir.

Canlı şekil mi görsel mi gerektiğine karar verin

Varlık URL'si üreten JavaScript import ifadesi yükleme sorusunu yanıtlar. Tek başına dosyanın yollarını düzenleyicinizin canlı SVG ağacına koymaz. SVG.js'nin güncel içe/dışa aktarma belgeleri, işaretleme almayı ve dış SVG öğesini veya alt öğelerini elde etmeyi açıklar.

Görsel içindeki SVG hâlâ SVG içeriğidir. Ancak görsel sarmalayıcı kontrolümüzde kapsayan SVG ağacında bir image öğesi ve sıfır doğrudan yol vardır; bu ağaçta accent aramak hiçbir şey bulmaz. Gömülü görselin belgesinin içine ulaşmaz. MDN ayrı SVG görsel bağlamını ve kısıtlamalarını açıklar. Keskin görünen işlemeden düzenleme modeli çıkarmayın.

Daha geniş gömme kararı için satır içi SVG ve görsel yazısını okuyun. Bunun yerine Fabric'in canvas nesne modelini istiyorsanız Fabric.js içe aktarma anlatımı, farklı ayrıştırıcıyı ve düzenleme API'sini ele alır.

Tek adlandırılmış yol düzenlemesi yapıp her temsili kaydedin

Aşağıdaki eksiksiz kodu boş klasörde starter.html olarak kaydedin. Örneğin python3 -m http.server 8000 ile HTTP üzerinden sunun, ardından http://localhost:8000/starter.html açın. Betik sabitlenmiş paketi CDN'den yüklediği için bu başlangıç ağ bağlantısı gerektirir.

Sayfa özgün çizimi, canlı düzenlenmiş kopyayı ve görsel sarmalayıcı kontrolünü gösterir. Bağlantıları özgün ana dosyayı, önceki/sonraki tam kökleri, yalnız alt öğe metin parçasını, yeniden sarılmış kopyayı ve görsel sarmalayıcıyı indirir. Rapor, canvas'a boyanan SVG görsellerden piksel okur; PNG dışa aktarmaz.

<!doctype html>
<html lang="en">
<meta charset="utf-8">
<title>Original SVG.js artwork import and export</title>
<style>
  body { margin: 24px; font: 16px system-ui; background: #f6f2e8; }
  main { display: grid; grid-template-columns: repeat(3, 260px); gap: 20px; }
  figure { margin: 0; }
  svg, img { display: block; background: white; border: 1px solid #bbb; }
  pre { white-space: pre-wrap; font-size: 12px; }
</style>
<h1>Trusted artwork, one fill edit and two export forms</h1>
<main>
  <figure><img id="original" alt="Original artwork"><figcaption>Original SVG image</figcaption></figure>
  <figure><div id="live"></div><figcaption>Imported live SVG, accent edited</figcaption></figure>
  <figure><div id="wrapper"></div><figcaption>Image wrapper, original artwork</figcaption></figure>
</main>
<p id="downloads"></p>
<pre id="report"></pre>
<script src="https://cdn.jsdelivr.net/npm/@svgdotjs/svg.js@3.2.6/dist/svg.min.js"></script>
<script>
  const markup = '<svg xmlns="http://www.w3.org/2000/svg" id="original-artwork" width="240" height="160" viewBox="0 0 240 160">'
    + '<path id="body" d="M80 20 L140 80 L80 140 L20 80 Z M80 56 L104 80 L80 104 L56 80 Z" fill="#176b5b" fill-rule="evenodd"/>'
    + '<path id="accent" d="M172 48 L220 80 L172 112 Z" fill="#d4a53a"/></svg>';
  const url = text => 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(text);
  async function pixels(text) {
    const image = new Image();
    image.src = url(text);
    await image.decode();
    const canvas = document.createElement('canvas');
    canvas.width = 240;
    canvas.height = 160;
    const ctx = canvas.getContext('2d');
    ctx.drawImage(image, 0, 0);
    const rgba = (x, y) => [...ctx.getImageData(x, y, 1, 1).data];
    return { naturalWidth: image.naturalWidth, naturalHeight: image.naturalHeight,
      opening: rgba(80, 80), body: rgba(80, 40), accent: rgba(188, 80), corner: rgba(0, 0) };
  }
  function inventory(text) {
    const node = new DOMParser().parseFromString(text, 'image/svg+xml').documentElement;
    return { root: node.localName, viewBox: node.getAttribute('viewBox'),
      paths: [...node.querySelectorAll('path')].map(p => ({ id: p.id, d: p.getAttribute('d'), fill: p.getAttribute('fill') })),
      imageCount: node.querySelectorAll('image').length };
  }
  async function run() {
    document.getElementById('original').src = url(markup);
    const host = SVG().addTo('#live').size(240, 160).viewbox(0, 0, 240, 160);
    host.svg(markup);
    const artwork = host.findOne('#original-artwork');
    const before = artwork.svg();
    const accent = artwork.findOne('#accent');
    const beforeD = accent.attr('d');
    accent.fill('#b95434');
    const full = artwork.svg();
    const children = artwork.svg(false);
    const rewrapped = SVG().size(240, 160).viewbox(0, 0, 240, 160);
    rewrapped.svg(children);
    const wrappedFull = rewrapped.svg();
    const imageWrapper = SVG().addTo('#wrapper').size(240, 160).viewbox(0, 0, 240, 160);
    imageWrapper.image(url(markup)).size(240, 160);
    const wrapperFull = imageWrapper.svg();
    const files = { 'master.svg': markup, 'before.svg': before, 'edited.svg': full,
      'children-only.txt': children, 'rewrapped.svg': wrappedFull, 'image-wrapper.svg': wrapperFull };
    for (const [name, text] of Object.entries(files)) {
      const a = document.createElement('a');
      a.href = name.endsWith('.txt') ? 'data:text/plain;charset=utf-8,' + encodeURIComponent(text) : url(text);
      a.download = name;
      a.textContent = name;
      a.style.marginRight = '12px';
      document.getElementById('downloads').append(a);
    }
    const results = {};
    for (const [name, text] of Object.entries(files)) {
      if (name.endsWith('.svg')) results[name] = { inventory: inventory(text), pixels: await pixels(text) };
    }
    document.getElementById('report').textContent = JSON.stringify({
      requestedPackageVersion: '3.2.6',
      scriptURL: document.querySelector('script[src]').src,
      selectedAccentFound: Boolean(accent), selectedAccentDUnchanged: beforeD === accent.attr('d'),
      allPathDUnchanged: JSON.stringify(inventory(before).paths.map(p => p.d)) === JSON.stringify(inventory(full).paths.map(p => p.d)),
      childrenHasOuterSVG: /<svg[\s>]/i.test(children),
      wrapperDirectPathCount: imageWrapper.find('path').length,
      wrapperAccentFound: Boolean(imageWrapper.findOne('#accent')), results
    }, null, 2);
  }
  run();
</script>
</html>
 

Alınan işaretleme original-artwork adlı iç içe kök içerir. Örnek dışa aktarmadan önce o kökü seçer; teslim kopyası ilgisiz üst kapsayıcıya güvenmek yerine kendisi için oluşturulmuş 240 × 160 görüntü alanını taşır. Ardından kök içinde accent seçilir. SVG.js seçici tabanlı başvuruları ve öğe yöntemlerini belgeler; açık parça adları yol sırasına bağlılığı önler.

Kod bilinçli olarak kendi sabit işaretlemesiyle sınırlıdır. SVG yükleme temizleyicisi değildir. Rastgele dizgeyi ayrıştırmak veya eklemek güvenli olduğunu kanıtlamaz; MDN DOMParser başvurusu, ayrıştırmayı güvenilmeyen içerik ekleme riskinden ayırır. Rutini yüklemelere uyarlamadan önce ayrı doğrulama ve güven politikası tasarlayın.

Yalnız canlı önizlemeyi değil kayıtlı sonucu inceleyin

Gerçek tarayıcı çalıştırmamız şu kontrolleri üretti:

İki özgün yol d dizgesi önceki/sonraki çıktılarda özdeş kaldı. Örneklenen üçgen içi RGBA (212, 165, 58, 255) değerinden (185, 84, 52, 255) değerine değişti. Örneklenen eşkenar dörtgen içi (23, 107, 91, 255) kaldı; açıklığı ve dış köşe 0 alfayı korudu. Beş bağımsız SVG dosyasının tamamı 240 × 160 içsel boyutlarla görsel olarak yeniden açıldı.

Adlandırılmış tek parçayı değiştirin

Bu sonuçlar bu testte amaçlanan düzenlemeyi kanıtlar. Bayt bayt özdeş XML korumasını, tüm filtreler veya CSS desteğini ya da üretim iş akışına uygunluğu kanıtlamaz. Kütüphanenin serileştirmesi, bu belirli yol dizgelerini korurken belgenin işaretlemesini değiştirebilir. Özgün ana dosyayı teslim kopyasının yanında saklayın.

Kendi çiziminizde gerçekten kullandığınız yapıları kontrol edin: adlar ve gruplar, kırpma, gradyanlar, dönüşümler, konturlar ve metin. Dışa aktarılan dosyayı alıcı uygulamada yeniden açın, sonra amaçlanan düzenlemeyi tekrarlayın. SVG düzenleme kılavuzu, içe aktarma kodunu değiştirmeden önce kaynak yapısını tanılamaya yardımcı olabilir.

Yalnız alt öğe çıktısını bilinçli parça olarak değerlendirin

Bu çalıştırmada artwork.svg(false), dış svg etiketi olmadan iki yol döndürdü. Çizim kökünün görüntü alanını çıkardı. Ayrı rewrapped SVG kökü alt öğeleri kabul etmeden önce 240 × 160 boyutları ve aynı viewBox değerini sağlar; çıktısı daha sonra kontrol edilmiş mercan üçgeni işler.

Hedefe göre tam belge veya parça seçin. Bağımsız indirme için amaçlanan tam kökü koruyun. Mevcut çizime ekleme için alt öğelerin hangi üst koordinat sistemini, devralınan stilleri ve tanımları kullanacağına karar verin. Bu basit testte harici kaynak veya ortak tanım yoktur; başvurulu parçanın gereken tüm bağımlılıkları taşıyıp taşımadığını sınamaz.

Görsel sarmalayıcı çıktımız, çözülen baytları özgün ana dosyayla eşleşen kodlanmış SVG'yi korudu. Kontrol raster dönüşümünü değil temsil farkını gösterir. Kaynağınız zaten kullanılabilir vektör geometriyse yeniden izlemek yerine öğe seçimini veya çıktı sınırını düzeltin.

Kaynakta düzenlenecek yol yoksa

Kendi düz PNG veya JPG illüstrasyonunuz ayrı renklendirilebilir bölgeler gerektiriyorsa PerfectVector ile SVG adayı hazırlayın. Konturları ve açıklıkları inceleyin, ardından uygulamanızın ihtiyaç duyduğu parça adlarını oluşturun. Vektörleştirme bir bölgenin accent adını alması gerektiğini bilmez veya alınan belgenin düzenleyicinizin veri modeline uyacağını garanti etmez.

Şekiller zaten mevcutsa uygun SVG ana dosyasını koruyun. Rasterden vektöre hazırlığın kodunuzdan önce gerekip gerekmediğine karar vermek için vektörleştirme genel bakışını kullanın.

Sık sorulan sorular

SVG.js düzenlemek için SVG dizgesi alabilir mi? Evet. Bu başlangıç kendi güvenilir işaretlemesini canlı SVG kapsayıcısına alır, oluşturulmuş yolu seçer ve dolgusunu değiştirir. Rastgele yüklemeler ayrı güven ve doğrulama politikası gerektirir; işaretleme API'si temizleyici değildir.

Çizimi görüyor ama vurgu yolunu neden bulamıyorum? Canlı işaretleme mi aldığınızı, görsel mi yerleştirdiğinizi kontrol edin. Görsel sarmalayıcı kontrolümüz SVG çizimini gösterir ancak sarmalayıcı ağacında doğrudan accent yolu sunmaz. Seçili üst öğeyi ve kaynağın gerçek kimliklerini de kontrol edin.

Yalnız alt öğe çıktısı tam SVG dosyası mı? Bu testte değil. Dış SVG görüntü alanı olmadan iki yol içerir. Bağımsız dosyada amaçlanan tam kökü kullanın veya parça eklerken hedef kökü ve koordinat sistemini açık sağlayın.

Başarılı düzenleme çıktının her SVG özelliğini koruduğunu kanıtlar mı? Hayır. İki basit yolu, dolgu değerlerini, tam yol verilerini ve yeniden açılmış beş dosyayı kontrol ettik. Çiziminizin ihtiyaç duyduğu özel özellikleri ve alıcı uygulamayı sınayın, özgün ana dosyayı koruyun.

Kaynaklar

1. SVG.js — İçe / Dışa Aktarma, sürüm 3.2 — İşaretleme alma ve tam kök ile yalnız alt öğe serileştirmesi.
2. SVG.js — Öğelere Başvurma / Oluşturma, sürüm 3.2 — Adlandırılmış öğeleri bulma ve özelliklerini değiştirme.
3. SVG.js — 3.2.6 sürümü — Çalıştırılan başlangıcın sabitlediği resmî sürüm.
4. MDN — Görsel olarak SVG — Görsel gömme bağlamı ve kısıtlamaları.
5. MDN — DOMParser.parseFromString — İşaretleme ayrıştırma ve güvenilmeyen girdiyi ayrı işleme.

İllüstrasyonunuz yalnızca raster pikseller olarak mevcutsa ve parça düzeyinde düzenleme gerekiyorsa kendi çiziminizden vektör adayı hazırlayın. Dış hattı ve açıklıkları kontrol edin, ana dosyayı koruyun, ardından alıcı iş akışınızda adlandırılmış düzenlemeyi ve kayıtlı SVG'yi doğrulayın.