SVG körvonal → kitöltés konverter

Illesszen be bármilyen körvonalas alakzatokat tartalmazó SVG-t, és kapjon vissza egy egyenértékű SVG-t, amelyben minden körvonalat ugyanolyan vizuális alakú és szélességű kitöltött útvonal helyettesít. Hasznos ikonrendszerekhez és tervezőeszközökhöz, amelyek csak a kitöltéseket jelenítik meg megbízhatóan, vagy ha egy SVG-t csak kitöltéses útvonalakra szeretne redukálni a további vektoros szerkesztés előtt.

Mi ez az eszköz?

Egyes renderelési folyamatok — bizonyos ikonfont-generátorok, néhány játékmotor, régebbi PDF-exportálók, és a csak kitöltéseket összeállító eszközök — nem kezelik helyesen, vagy egyáltalán nem kezelik az SVG körvonalakat. A körvonal ugyanolyan szélességű kitöltött alakzattá alakítása ezt teljesen megkerüli: a vizuális eredmény azonosnak tűnik, de egyetlen kitöltött útvonalként van kifejezve egy körvonalas vonal helyett.

Ez az eszköz úgy működik, hogy sok pontot mintavételez az egyes alakzatok körvonala mentén (a böngésző saját útvonalhossz API-jával, ugyanazzal a mechanizmussal, amelyet az SVG-animáció is használ), majd két párhuzamos, a körvonal szélességének felével eltolt vonalat épít mindkét oldalon, végül ezeket egyetlen kitöltött sokszöggé zárja.

Miért érdemes használni?

Path, line, polyline, polygon, rect, circle és ellipse elemeken egyaránt működik — nem csak a <path>-en — egyetlen egységes mintavételi módszerrel.
Megőrzi az alakzat saját kitöltését (ha volt neki) külön rétegként az új körvonal-kitöltés alatt, így a kitöltött és körvonalas alakzatok is helyesen alakulnak át.
Egymás melletti előtte/utána előnézet, így vizuálisan is megerősítheti a konverziót, mielőtt átmásolja az eredményt.
Teljes egészében a böngészőjében fut — a beillesztett SVG soha nem kerül feltöltésre sehova.
Ingyenes, azonnali, nincs fájlméret-korlát azon túl, amit a böngészője renderelni képes.

Használati útmutató

Illessze be az SVG kódot a szövegdobozba (egy működő példa előre ki van töltve).
Kattintson a „Convert strokes to fills” gombra.
Hasonlítsa össze az előtte/utána előnézetet, hogy megerősítse, az eredmény helyesnek tűnik.
Kattintson a „Copy SVG” gombra, hogy átmásolja az átalakított, körvonal nélküli kódot.

Példa

Bemenet

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

Kimenet

Egyetlen <path fill="#3B82F6"> elem, amelynek körvonala az eredeti görbe mindkét oldalát követi, 12 egység távolságra egymástól, stroke attribútum nélkül.

A görbe alakja megmarad, mert az eszköz folyamatosan mintavételez pontokat a ténylegesen renderelt útvonal mentén, nem csak a kontrollpontjai alapján.

Gyakori kérdések

Miért lesznek az éles sarkok lekerekítettek a hegyes (gérvágott) helyett?

Ez a mintavételi módszer ismert, szándékos egyszerűsítése: a sűrű pontmintavétel egy útvonal mentén természetesen lekerekített csatlakozásokat és véglezárásokat eredményez, az eredeti stroke-linejoin vagy stroke-linecap értéktől függetlenül. A pontos gérvágott vagy lecsapott csatlakozások rekonstruálásához egy másik, összetettebb algoritmus szükséges (vonalszakasz-metszéspont minden csúcsnál), amelyet ez az eszköz nem valósít meg. A legtöbb ikon- és illusztrációs felhasználási esetben a vizuális különbség csekély, de ha pontos gérvágott csatlakozásokra van szüksége, egy dedikált vektorszerkesztő „outline stroke” funkciója pontosabb lesz.

Kezeli ez a szaggatott körvonalakat (stroke-dasharray)?

Nem — az eszköz minden körvonalat folytonosként kezel, és figyelmen kívül hagyja a stroke-dasharray/stroke-dashoffset tulajdonságokat. Egy szaggatott körvonal úgy lesz átalakítva, mintha folytonos lenne, ami megváltoztatja a megjelenését. Ha az SVG-je szaggatott körvonalakat használ, ez az eszköz nem megfelelő azokhoz az adott alakzatokhoz.

Miért nem alakult át semmi?

Az eszköz csak azokat az elemeket alakítja át, amelyeknek egyszerre van körvonalszíne (nem „none”) és pozitív stroke-width értéke, akár attribútumként, akár az elem saját stílusában megadva. Ha az SVG-je egy külső CSS osztályon keresztül állítja be a körvonalat, amelyet a böngésző nem tud feloldani ennek az eszköznek az elszigetelt előnézetében, vagy egy osztályokra hivatkozó <style> blokkon keresztül, a kiszámított stílus lehet, hogy nem oldódik fel helyesen — próbálja meg közvetlen attribútumként beállítani a stroke-ot és a stroke-width-et az alakzaton.

Mikor érdemes a körvonalakat kitöltésekké alakítani, és mikor érdemes megtartani a körvonalakat?

Ha még tervezés alatt áll, tartsa meg a körvonalakat — a stroke-width egyetlen számként szerkeszthető marad, amit átalakítás után elveszít. Ha olyan folyamatba exportál, amely rosszul kezeli a körvonalakat (ikonfont-generátorok, bizonyos játékmotorok vagy PDF-exportálók), alakítsa át utolsó exportálási lépésként, és tartsa meg az eredeti körvonalas fájlt szerkeszthető forrásként, mivel az átalakítás egyirányú.

Az átalakítás megnöveli az SVG fájl méretét?

Általában igen — egy néhány kontrollponttal definiált körvonalas görbe több száz mintavételezett vonalszakaszból álló kitöltött körvonallá válik, így az útvonaladatok jelentősen megnőnek. Ikonoknál ez a gyakorlatban ritkán számít, de ha a méret aggodalomra ad okot, futtassa az átalakított kimenetet utólag egy SVG-optimalizálón, hogy csökkentse a koordináta-pontosságot.

A stroke-opacity átkerül az átalakított kitöltésbe?

Nem — az átalakított útvonal a körvonal színét veszi át kitöltésként, de teljes átlátszatlansággal; az eredeti alakzat stroke-opacity értéke elvész. Ha meg szeretné őrizni az átlátszóságot, adja hozzá manuálisan az azonos értékű fill-opacity-t az átalakított útvonalhoz a kimenet átmásolása után.