Convertor de contur SVG în umplere

Lipește orice SVG care conține forme cu contur și primești înapoi un SVG echivalent în care fiecare contur este înlocuit cu un traseu umplut de aceeași formă vizuală și lățime. Util pentru sisteme de pictograme și instrumente de design care redau fiabil doar umpleri, sau pentru a reduce un SVG la trasee doar cu umplere înainte de editarea vectorială ulterioară.

Ce este acest instrument?

Unele fluxuri de randare — anumiți generatori de fonturi de pictograme, unele motoare de jocuri, exportatori PDF mai vechi și instrumente care compun doar umpleri — nu gestionează corect sau deloc contururile SVG. Convertirea unui contur într-o formă umplută de aceeași lățime evită complet această problemă: rezultatul vizual arată identic, dar este exprimat ca un singur traseu umplut în loc de o linie cu contur.

Acest instrument funcționează prin eșantionarea multor puncte de-a lungul conturului fiecărei forme (folosind propriul API de lungime a traseului al browserului, același mecanism folosit de animația SVG) și construiește două linii de decalaj paralele la jumătate din lățimea conturului pe fiecare parte, apoi le închide într-un singur poligon umplut.

De ce să-l folosești?

Funcționează pe elemente path, line, polyline, polygon, rect, circle și ellipse — nu doar pe <path> — folosind o metodă unificată de eșantionare.
Păstrează propria umplere a formei (dacă avea una) ca un strat separat sub noua umplere de contur, astfel încât formele umplute și conturate se convertesc corect.
Previzualizare înainte/după una lângă alta, astfel încât să poți confirma vizual conversia înainte de a copia rezultatul.
Rulează în întregime în browserul tău — SVG-ul pe care îl lipești nu este niciodată încărcat nicăieri.
Gratuit, instantaneu, fără limită de dimensiune a fișierului dincolo de ceea ce poate reda browserul tău.

Cum se folosește

Lipește codul tău SVG în caseta de text (un exemplu funcțional este precompletat).
Fă clic pe "Convert strokes to fills".
Compară previzualizarea înainte/după pentru a confirma că rezultatul arată corect.
Fă clic pe "Copy SVG" pentru a copia codul convertit, fără contur.

Exemplu

Intrare

<path d="M20 100 Q100 20 180 100" fill="none" stroke="#3B82F6" stroke-width="12"/>

Rezultat

Un singur <path fill="#3B82F6"> al cărui contur urmărește ambele părți ale curbei originale, la o distanță de 12 unități, fără niciun atribut stroke.

Forma curbei este păstrată deoarece instrumentul eșantionează puncte continuu de-a lungul traseului efectiv redat, nu doar punctele sale de control.

Întrebări frecvente

De ce colțurile ascuțite ies rotunjite în loc de ascuțite (mitrate)?

Aceasta este o simplificare cunoscută și deliberată a abordării de eșantionare: eșantionarea densă a punctelor de-a lungul unui traseu produce în mod natural îmbinări și capete rotunjite, indiferent de valoarea originală stroke-linejoin sau stroke-linecap. Reconstruirea îmbinărilor exacte de tip mitre sau bevel necesită un algoritm diferit, mai complex (intersecția segmentelor de linie la fiecare vârf) pe care acest instrument nu îl implementează. Pentru majoritatea cazurilor de utilizare a pictogramelor și ilustrațiilor, diferența vizuală este minoră, dar dacă ai nevoie de îmbinări mitre exacte, funcția "outline stroke" a unui editor vectorial dedicat va fi mai precisă.

Gestionează acest instrument contururi punctate (stroke-dasharray)?

Nu — instrumentul tratează fiecare contur ca fiind solid și ignoră stroke-dasharray/stroke-dashoffset. Un contur punctat va fi convertit ca și cum ar fi solid, ceea ce îi schimbă aspectul. Dacă SVG-ul tău folosește contururi punctate, acest instrument nu este potrivit pentru acele forme specifice.

De ce nu s-a convertit nimic?

Instrumentul convertește doar elemente care au atât o culoare de contur (nu "none"), cât și un stroke-width pozitiv, setate fie ca atribute, fie în stilul propriu al elementului. Dacă SVG-ul tău setează conturul printr-o clasă CSS externă pe care browserul nu o poate rezolva în previzualizarea izolată a acestui instrument, sau printr-un bloc <style> care face referire la clase, stilul calculat s-ar putea să nu se rezolve corect — încearcă în schimb să setezi stroke și stroke-width ca atribute directe pe formă.

Când ar trebui să convertesc contururile în umpleri și când ar trebui să păstrez contururile?

Dacă încă proiectezi, păstrează contururile — stroke-width rămâne editabil ca un singur număr, lucru pe care îl pierzi după conversie. Dacă exporți către un flux care gestionează greșit contururile (generatoare de fonturi de pictograme, anumite motoare de jocuri sau exportatori PDF), convertește ca pas final de export și păstrează fișierul original cu contur ca sursă editabilă, deoarece conversia este unidirecțională.

Conversia mărește fișierul SVG?

De obicei da — o curbă cu contur definită de câteva puncte de control devine un contur umplut format din sute de segmente de linie eșantionate, astfel încât datele traseului cresc substanțial. Pentru pictograme, acest lucru rareori contează în practică, dar dacă dimensiunea este o preocupare, rulează rezultatul convertit printr-un optimizator SVG ulterior pentru a reduce precizia coordonatelor.

Se transferă stroke-opacity la umplerea convertită?

Nu — traseul convertit preia culoarea conturului ca umplere, dar la opacitate completă; o valoare stroke-opacity de pe forma originală este eliminată. Dacă ai nevoie ca transparența să fie păstrată, adaugă manual fill-opacity cu aceeași valoare la traseul convertit după copierea rezultatului.