Konwerter obrysu SVG na wypełnienie

Wklej dowolny SVG zawierający kształty z obrysem, a otrzymasz równoważny SVG, w którym każdy obrys zostaje zastąpiony wypełnioną ścieżką o tym samym kształcie wizualnym i szerokości. Przydatne w systemach ikon i narzędziach projektowych, które niezawodnie renderują tylko wypełnienia, lub gdy chcesz zredukować SVG do samych wypełnionych ścieżek przed dalszą edycją wektorową.

Czym jest to narzędzie?

Niektóre potoki renderowania — pewne generatory czcionek ikonowych, niektóre silniki gier, starsze eksportery PDF oraz narzędzia, które składają tylko wypełnienia — nie obsługują poprawnie (lub w ogóle) obrysów SVG. Zamiana obrysu na wypełniony kształt o tej samej szerokości całkowicie omija ten problem: wynik wizualny wygląda identycznie, ale jest wyrażony jako pojedyncza wypełniona ścieżka zamiast linii z obrysem.

To narzędzie działa poprzez próbkowanie wielu punktów wzdłuż konturu każdego kształtu (za pomocą wbudowanego w przeglądarkę API długości ścieżki, tego samego mechanizmu, którego używa animacja SVG) i budowanie dwóch równoległych linii przesuniętych o połowę szerokości obrysu po każdej stronie, a następnie zamykanie ich w jeden wypełniony wielokąt.

Dlaczego warto go używać?

Działa na elementach path, line, polyline, polygon, rect, circle i ellipse — nie tylko na <path> — używając jednej ujednoliconej metody próbkowania.
Zachowuje własne wypełnienie kształtu (jeśli je posiadał) jako osobną warstwę pod nowym wypełnieniem z obrysu, dzięki czemu kształty wypełnione i obrysowane konwertują się poprawnie.
Podgląd przed/po obok siebie, dzięki czemu możesz wizualnie potwierdzić konwersję przed skopiowaniem wyniku.
Działa całkowicie w przeglądarce — wklejony SVG nigdy nie jest nigdzie wysyłany.
Darmowe, natychmiastowe, bez limitu rozmiaru pliku poza tym, co może wyrenderować przeglądarka.

Jak używać

Wklej znacznik SVG do pola tekstowego (przykład roboczy jest już wypełniony).
Kliknij „Konwertuj obrysy na wypełnienia”.
Porównaj podgląd przed/po, aby potwierdzić poprawność wyniku.
Kliknij „Kopiuj SVG”, aby skopiować przekonwertowany znacznik bez obrysów.

Przykład

Wejście

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

Wynik

Pojedynczy element <path fill="#3B82F6">, którego kontur śledzi obie strony oryginalnej krzywej, w odległości 12 jednostek od siebie, bez żadnego atrybutu stroke.

Kształt krzywej jest zachowany, ponieważ narzędzie próbkuje punkty w sposób ciągły wzdłuż faktycznie renderowanej ścieżki, a nie tylko jej punktów kontrolnych.

Najczęściej zadawane pytania

Dlaczego ostre narożniki wychodzą zaokrąglone zamiast spiczaste (uciosowe)?

To znane, celowe uproszczenie metody próbkowania: gęste próbkowanie punktów wzdłuż ścieżki naturalnie tworzy zaokrąglone połączenia i zakończenia, niezależnie od wartości stroke-linejoin czy stroke-linecap oryginału. Odtworzenie dokładnych połączeń uciosowych lub ściętych wymaga innego, bardziej złożonego algorytmu (przecięcia odcinków linii w każdym wierzchołku), którego to narzędzie nie implementuje. Dla większości zastosowań ikon i ilustracji różnica wizualna jest niewielka, ale jeśli potrzebujesz dokładnych połączeń uciosowych, funkcja „outline stroke” dedykowanego edytora wektorowego będzie precyzyjniejsza.

Czy to obsługuje obrysy przerywane (stroke-dasharray)?

Nie — narzędzie traktuje każdy obrys jako ciągły i ignoruje stroke-dasharray/stroke-dashoffset. Obrys przerywany zostanie przekonwertowany tak, jakby był ciągły, co zmieni jego wygląd. Jeśli Twój SVG używa obrysów przerywanych, to narzędzie nie jest odpowiednie dla tych konkretnych kształtów.

Dlaczego nic się nie przekonwertowało?

Narzędzie konwertuje tylko elementy, które mają zarówno kolor obrysu (inny niż „none”), jak i dodatnią szerokość obrysu, ustawione jako atrybuty lub we własnym stylu elementu. Jeśli Twój SVG ustawia obrys za pomocą zewnętrznej klasy CSS, której przeglądarka nie może rozwiązać w izolowanym podglądzie tego narzędzia, lub przez blok <style> odwołujący się do klas, obliczony styl może nie zostać poprawnie rozpoznany — spróbuj ustawić stroke i stroke-width jako bezpośrednie atrybuty kształtu.

Kiedy powinienem konwertować obrysy na wypełnienia, a kiedy zachować obrysy?

Jeśli wciąż projektujesz, zachowaj obrysy — stroke-width pozostaje edytowalny jako pojedyncza liczba, co tracisz po konwersji. Jeśli eksportujesz do potoku, który źle obsługuje obrysy (generatory czcionek ikonowych, niektóre silniki gier lub eksportery PDF), konwertuj jako ostatni krok eksportu i zachowaj oryginalny plik z obrysami jako edytowalne źródło, ponieważ konwersja jest jednokierunkowa.

Czy konwersja powiększa plik SVG?

Zazwyczaj tak — jedna krzywa z obrysem zdefiniowana przez kilka punktów kontrolnych staje się wypełnionym konturem złożonym z setek próbkowanych odcinków linii, więc dane ścieżki znacznie rosną. Dla ikon rzadko ma to praktyczne znaczenie, ale jeśli rozmiar jest istotny, przepuść przekonwertowany wynik przez optymalizator SVG, aby zmniejszyć precyzję współrzędnych.

Czy stroke-opacity jest przenoszona na przekonwertowane wypełnienie?

Nie — przekonwertowana ścieżka przyjmuje kolor obrysu jako swoje wypełnienie, ale przy pełnej nieprzezroczystości; wartość stroke-opacity z oryginalnego kształtu jest odrzucana. Jeśli potrzebujesz zachować przezroczystość, dodaj fill-opacity o tej samej wartości do przekonwertowanej ścieżki ręcznie po skopiowaniu wyniku.