SVG'yi gizli yollar bırakmadan kalıcı kırpın

Dolgulu SVG çizimini kalıcı olarak kırpmak için amaçlanan her şeklin kırpma bölgesiyle kesişimini alın, ardından yalnızca ortaya çıkan geometriyi dışa aktarın. Düzenlenebilir ana dosyayı ayrı tutun. Daha küçük viewBox veya kesme yolu, özgün dış yolları dosyada bırakırken gördüğünüzü değiştirebilir.

Örneğimiz dört özgün, opak, kapalı çokgensel nesne ve dikdörtgen kırpma kullanır. Bir nesne gerçek bir açıklık içerir. Dolgularını ve boyama sırasını korumak için nesneleri ayrı ayrı kırpar, sonucu SVG olarak kaydeder ve kontrol için gerçek dosyayı yeniden açarız. Bu, sınırlı bir geometri iş akışıdır; her SVG efektini kırpmak veya test edilmiş kesici dosyaları üretmek için genel bir yöntem değildir.

Gizlenmiş çizim mi, kaldırılmış çizim mi gerektiğine karar verin

Kesmeyi sonradan ayarlamak istediğinizde kesme yolu yararlıdır. MDN'nin kesme başvurusu, render sonucunu öğenin alttaki geometrisinden ayırır. Kesme ilişkisini kaldırmak özgün çizimi yeniden açığa çıkarabilir.

Kalıcı kırpma, teslim ettiğiniz geometriyi değiştirir. Sonraki kişinin sınırlandırılmış şekillerin kendisine ihtiyacı olduğunda kullanın; kırpılmamış kaynağı ayrı ana dosya olarak saklayın.

Görünmeyen her öğeyi silmek farklı bir görevdir. Kesme şekli, maske kaynağı veya başvurulan sembol, doğrudan boyanmasa bile gerekli olabilir. Kesme yolu ve maske kılavuzumuz bu render ilişkilerini; kesme koordinatları kılavuzu koordinat sistemlerini açıklar.

Tanıyabildiğiniz kapalı dolgularla başlayın

Düzenlenebilir kaynak, tanımlı kırpma bölgesi ve kaydedilmiş SVG'yi inceleme yolu gerekir. Bu örnek tarayıcıda Paper.js 0.12.18 çalıştırır. Kontursuz, düz ve tamamen opak çokgensel dolguları işler. İşlenenler, rastgele içe aktarılmış gruplar yerine Path veya CompoundPath nesneleridir.

Kaynağımız dikdörtgen açıklıklı turkuaz çerçeve, turuncu üçgen, mor baklava ve kırpmanın tamamen dışında küçük sarı nesne içerir. Kırpma dikdörtgeni (60, 40) konumunda başlar ve 160 × 120 SVG kullanıcı birimidir. Bunlar fiziksel baskı boyutları değil, hazırlanmış koordinatlardır.

Çerçevenin açıklığı bileşik yola aittir. Yalnızca döngüde üzerlerinden geçmek için konturlarını ilişkisiz dolgulu nesnelere ayırmayın. SVG delikleri kılavuzu, beyaz yamanın ve gerçek saydam açıklığın neden farklı davrandığını açıklar.

Bu özgün örneği source.svg olarak kaydedin:

<svg xmlns="http://www.w3.org/2000/svg"
     width="300" height="220" viewBox="0 0 300 220">
  <path id="frame" fill="#39786E" fill-rule="evenodd"
        d="M20 20H160V180H20Z M85 70V100H115V70Z"/>
  <path id="triangle" fill="#DE9252"
        d="M150 0L270 110L150 200Z"/>
  <path id="leaf" fill="#80618E"
        d="M180 130L240 150L180 190L120 150Z"/>
  <path id="outside" fill="#D4B35E" d="M250 10H280V30H250Z"/>
</svg>

Her nesnenin kesişimini alın ve yalnızca sonucunu tutun

Kesişim, nesne ve kırpmanın ortak alanını tutar. Paper.js'nin intersect() belgeleri, kesişimi içeren yeni yol öğesini anlatır. Burada trace: true, iki işleneni de alan olarak ele alır. Bu seçenek Boolean geometrisiyle ilgilidir; raster çizimi vektöre dönüştürmez. İçe aktarılan ana dosya ve kırpma yardımcısı dışa aktarılan sahneye otomatik girmesin diye insert: false kullanırız.

Tekrarlanabilir yerel örnek için sabitlenmiş kitaplığı boş bir çalışma klasörüne kurun:

npm install --save-exact paper@0.12.18

Bunu source.svg ve aşağıdaki crop.js dosyasının yanına index.html olarak kaydedin:

<!doctype html>
<html lang="en">
<meta charset="utf-8">
<title>Permanent SVG crop</title>
<canvas id="work" width="300" height="220" hidden></canvas>
<p id="status">Running crop…</p>
<pre id="svg-output"></pre>
<pre id="receipt"></pre>
<script src="node_modules/paper/dist/paper-full.min.js"></script>
<script src="crop.js"></script>
</html>

Bunu crop.js olarak kaydedin. Klasörü yerel HTTP sunucusuyla sunup index.html dosyasını açın; betik yanındaki SVG dosyasını alır.

(async () => {
  paper.setup(document.getElementById('work'));
 
  const source = await (await fetch('source.svg')).text();
  const imported = paper.project.importSVG(source, {
    insert: false,
    expandShapes: true
  });
  const crop = new paper.Path.Rectangle({
    rectangle: new paper.Rectangle(60, 40, 160, 120),
    insert: false
  });
  const delivery = new paper.Group({ insert: false });
  const rows = [];
 
  for (const name of ['frame', 'triangle', 'leaf', 'outside']) {
    const operand = imported.getItem({ name });
    if (!(operand instanceof paper.Path || operand instanceof paper.CompoundPath)) {
      throw new Error('Expected filled path: ' + name);
    }
 
    const result = operand.intersect(crop, { insert: false, trace: true });
    if (Math.abs(result.area) < 1e-8) {
      rows.push({ name, removed: true });
      result.remove();
      continue;
    }
 
    result.fillColor = operand.fillColor.clone();
    result.fillRule = operand.fillRule;
    result.strokeColor = null;
    result.opacity = 1;
    result.name = 'cropped-' + name;
    delivery.addChild(result);
    rows.push({
      name,
      result: result.className,
      fill: result.fillColor.toCSS(true),
      area: result.area
    });
  }
 
  delivery.translate(new paper.Point(-60, -40));
  paper.project.activeLayer.addChild(delivery);
  const output = paper.project.exportSVG({
    asString: true,
    precision: 6,
    bounds: new paper.Rectangle(0, 0, 160, 120)
  });
 
  document.getElementById('svg-output').textContent = output;
  document.getElementById('receipt').textContent = JSON.stringify({
    paper: paper.version,
    rows,
    export_precision: 6,
    viewport: [0, 0, 160, 120]
  }, null, 2);
  document.getElementById('status').textContent = 'Intersection/export executed. Save the exact visible SVG output as cropped.svg and open that saved file independently.';
})().catch(e => {
  document.getElementById('status').textContent = 'FAIL: ' + e.message;
});

Açık ad listesi bu kaynağın boyama sırasını izler. Tutulan her sonuç kendi düz dolgusunu alır ve o sırada eklenir. Tüm çizimi önce tek siluette birleştirmek, korumak istediğimiz ayrı renk bölgelerini kaybettirirdi. Paper.js Boolean kılavuzumuz farklı birleşim ve çıkarma görevini ele alır.

Tamamen dışarıda kalan sarı nesne boş kesişim verir ve eklenmez. Küçük alan eşiği yalnızca bu örnek için bir korumadır; rastgele çizimlerden ince ayrıntıları silme izni değildir.

Tutulan geometriyi (-60, -40) kadar taşır ve sıfırdan başlayan 160 × 120 görüntü alanına aktarırız. Bu taşıma çıktının koordinat başlangıcını değiştirir. İstenmeyen dış geometriyi kaldıran kesişim işlemidir; yalnızca başlangıcı veya görüntü alanını değiştirmek bunu yapmaz. Paper.js'nin proje dışa aktarma başvurusu, burada kullanılan açık sınırları ve sayısal hassasiyeti belgeler.

Gerçek SVG'yi kaydedin, yeniden açın ve inceleyin

Görüntülenen SVG işaretlemesini aynen cropped.svg içine kopyalayın. Yalnızca programın bellekteki önizlemesine güvenmek yerine kaydedilmiş dosyayı bağımsız açın. Örneğimizde ayrı bir sayfa kaydedilmiş dosyayı yükledi, yeni Paper.js kapsamına aktardı ve tarayıcının SVG görüntü render motoruyla gösterdi.

Kontroller dosya yapısını, geometriyi ve görünümü ayırır:

• Dışa aktarılan SVG üç sonuç yol öğesi içerir; çerçeve açıklığını koruduğundan dört kapalı kontur vardır.
• Bu kontrollü çıktıda kırpma yardımcısı, özgün nesne kimlikleri, kesme yolları, maskeler, raster görüntüler ve efekt öğeleri yoktur.
• Yeniden açılan her kontur kapalıdır ve düz parçalardan oluşur. Tüm köşeleri, 0.00001 kullanıcı birimi toleransıyla çıktının 0…160 ve 0…120 bölgesinde kalır.
• Amaçlanan açıklık dolgulu geometrinin dışında ve render edilen dosyada saydam kalır. Turuncu bölge, kontrol edilen örtüşme noktasında yine turkuazın üzerinde görünür.
• Tarayıcı render karşılaştırması, yalnızca kesilmiş önizlemeyi kırpılmış dosyayla aynı boyutta, geometri incelemesinden ayrı karşılaştırır.

Bu dikdörtgen bölge ve düz parçalı örnekte her köşeyi ve kapanış kenarlarını kontrol etmek, saklanan konturların bölge içinde kaldığını kanıtlar. Tutamaçlı eğri veya içbükey kırpma farklı bir içerilme kontrolü gerektirir; birkaç örnek nokta aynı sonucu kanıtlamaz.

Görüntü karşılaştırmamız 640 × 480 raster kullanır ve bir kanal birden fazla farklıysa değişen pikseller için %0,5'lik açık tolerans tanımlar. Kaydedilmiş dosya renderı 307.200 pikselin 77'sinde, yaklaşık %0,0251 oranında farklıydı; dolayısıyla ölçütü geçti. Piksel olarak birebir aynı değildi: Tek kanaldaki en büyük fark 255'ti. Bu görsel karşılaştırma toleransıdır, geometri toleransı değildir. Kenara yakın yumuşatma ve gerçekten korunmuş dış yol farklı sorunlardır.

Bu işlem kırpmanın dışındaki geometriyi kaldırır. Tutulan renkli nesneler arasındaki her örtüşmeyi kaldırmaz. İç örtüşmeler boyama sırasında kalır; test edilen örtüşme noktası amaçlanan üst rengi doğrular. Boyanmış tüm gizli örtüşmeleri düzleştirmek ayrı bir görevdir.

Çizim farklı gösterim gerektiriyorsa durun

Bu örnek açık merkez çizgilerini, konturları, eğri işlenenleri, degradeleri, yumuşak maskeleri, raster görüntüleri, filtreleri, iç içe rastgele kesme yığınlarını veya yarı saydam örtüşen boyaları desteklediğini kanıtlamaz. Bu özellikleri kaldırıp görünümün korunduğunu varsaymayın.

Konturlu rota ve o konturun dolgulu dış hattı farklı geometridir. İş, görünür kontur alanını dolgulu şekil olarak gerektiriyorsa Boolean iş akışını seçmeden önce uygun düzenleyicide konturu dış hatta çevrilmiş kopya hazırlayıp inceleyin. Düzenlenebilirlik önemliyse özgün konturu tutun. Yumuşak maske, tüm solan kenarları korunarak sert kesişimle değiştirilemez.

Tek seferlik düzenlemede gerekli nesneleri seçip incelemek vektör düzenleyicide daha kolay olabilir. Hangi aracı seçerseniz seçin kaydedilmiş sonucun deliklerini, renklerini ve sınırlarını kontrol edin. Dışa aktarma hassasiyeti ve çok küçük ayrıntılar sonraki kullanımdan önce özellikle dikkat gerektirir.

Eksik vektör çizimini yalnızca gerektiğinde kurtarın

Kaynak mevcut düzenlenebilir SVG ise o geometriyi doğrudan kırpın. Yalnızca uygun raster küçük resim kaldıysa ve düzenlenebilir şekiller gerekiyorsa PerfectVector'ın küçük resim iş akışı önce SVG adayı oluşturabilir. Kırpmadan önce kurtarılan konturları, açıklıkları ve ayrı dolguları inceleyin. Vektörleştirme piksellerden yollar oluşturur; istenen kırpma sınırını belirlemez veya Boolean sonucunu doğrulamaz. Özgün örneğimiz doğrudan hazırlanmış, izlenmemiştir.

Dokusu gerekiyorsa ve teslim biçimi amaçlanan raster kırpmayı destekliyorsa raster çizimi koruyun. Vektör kırpma, her görüntünün SVG olması gerektiğinden değil, sonraki adımın geometri gerektirmesinden dolayı yararlıdır.

Ana dosyayı kaybetmeden kırpmayı tamamlayın

1. Kırpılmamış ana dosyayı koruyup amaçlanan kapalı dolgulu nesneleri belirleyin.
2. Kırpmayı bu nesnelerle aynı koordinat bağlamında tanımlayın.
3. Her nesnenin kesişimini alın, test edilmiş stilini ve boyama sırasını koruyun; yardımcıları ve özgünleri teslim sahnesinden çıkarın.
4. Yalnızca tutulan geometriyi bilinçli sınırlar ve hassasiyetle dışa aktarın.
5. Kaydedilmiş dosyayı yeniden açıp gerçek yollarını, açıklıklarını, görünümünü ve amaçlanan hedefini ayrı kontrol edin.

Kaydedilmiş dosya bölge içinde amaçlanan geometriyi içerip gerekli delik ve renk ilişkilerini koruduğunda sınırlı kırpma tamamlanır. Dış geometri kalırsa özgün proje içeriğini dışa aktarıp aktarmadığınızı veya yalnızca kesmeyi ya da görüntü alanını değiştirip değiştirmediğinizi inceleyin. Açıklık dolarsa daha çok nesne birleştirmeden önce bileşik yolu ve dolgu kuralını kontrol edin.

Özgün çokgensel örnek için kaydedilmiş dosya görevini tamamladık. Kesiciye aktarmadık, fiziksel çıktıyı test etmedik veya genel SVG uyumluluk garantisi oluşturmadık.

Sık sorulan sorular

SVG'ye kesme uygulamak dış yollarını kalıcı siler mi? Kesme, başvurulan geometriyi korurken renderı sınırlar. Kalıcı geometrik kırpma, uygun yol işlemi ve yalnızca sonuçları içeren çıktı gerektirir.

Önce şekilleri birleştirerek tüm renkleri kırpabilir miyim? Tek birleşim, korumak istediğiniz ayrı dolgu bölgelerini kaybettirebilir. Bu örnek düz dolgulu her nesnenin kesişimini ayrı alır ve kaynağın boyama sırasını korur.

Daha küçük viewBox gizli çizimi kaldırır mı? Görüntü alanı eşlemesini ve gösterilen bölgeyi değiştirir. Kendi başına o bölgenin dışındaki kaynak yollarını silmez. Önizlemeyle birlikte kaydedilmiş geometriyi de inceleyin.

Sonuç her kesim uygulamasında çalışır mı? Bu tarayıcı testi bunu kanıtlamaz. Amaçlanan hedefte içe aktarılan geometriyi ve işlemleri inceleyin, ardından uygun üretim kontrolünü yapın.

Kaynaklar

1. MDN: SVG clipPath — Kesme, başvurulan öğenin geometrisini değiştirmeden renderı etkiler.
2. Paper.js: PathItem — Kesişim sonuçları ve alana dayalı Boolean seçenekleri.
3. Paper.js: Project — SVG içe aktarma, proje içeriği, dışa aktarma sınırları ve sayısal hassasiyet.

Yalnızca bitmap küçük resim kaynağından yollar mı gerekiyor? SVG adayı hazırlayın, deliklerini ve dolgularını inceleyin; ardından ayrı çalışma kopyasını kırpıp teslimden önce kaydedilmiş sonucu yeniden açın.