> [Site index](https://perfectvector.com/llms.txt) — available pages and descriptions. # Oblewanie kształtu SVG tekstem HTML za pomocą CSS float > Oblej przezroczysty SVG akapitem HTML za pomocą CSS shape-outside. Uruchom kompletny przykład float i sprawdź dwie szerokości, alfę oraz kolejność tekstu. Source: https://perfectvector.com/pl/blog/css-text-around-svg-shape Language: pl Author: Irene Kim Published: 2026-10-11T08:00:00+09:00 Updated: 2026-10-11T08:00:00+09:00 Aby tekst HTML oblewał sylwetkę SVG, ustaw obraz jako float, nadaj mu jawne wymiary i ustaw `shape-outside` na URL przezroczystego SVG. Dodaj `shape-margin`, aby uzyskać przestrzeń wokół konturu. Akapit pozostaje zwykłym HTML; SVG dostarcza obraz służący do obliczenia granicy oblewania. Działa to poza SVG. Nie zawija elementu SVG `text` ani nie wygina liter wzdłuż ścieżki. Poniższy przykład wykorzystuje autorską przezroczystą sylwetkę i kompletny akapit bez ręcznego pozycjonowania słów czy wstawionych podziałów wiersza. ## Wybierz rzeczywiście potrzebny układ tekstu | Zamierzony wynik | Odpowiedni punkt wyjścia | | --------------------------------------------------- | --------------------------------------------------------------------------------------------- | | Akapit strony płynie obok nieregularnej ilustracji | Obraz float z CSS shape-outside, jak tutaj | | Wielowierszowa etykieta mieści się w szerokości SVG | [Zawijanie tekstu SVG za pomocą tspan](https://perfectvector.com/pl/blog/svg-text-wrap-tspan) | | Bogata treść HTML znajduje się w obszarze SVG | [HTML wewnątrz SVG z foreignObject](https://perfectvector.com/pl/blog/svg-foreignobject-text) | | Litery biegną wzdłuż zakrzywionej linii bazowej | [Tekst SVG na ścieżce](https://perfectvector.com/pl/blog/svg-text-on-path) | Plik SVG nie przenosi układu otaczającego akapitu. Skopiowanie obrazu do innego dokumentu nie przeniesie tej relacji HTML/CSS. ## 1. Nadaj floatowi rozmiar i przezroczysty obraz [Dokumentacja shape-outside MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/shape-outside) opisuje właściwość jako sposób zmiany obszaru float, wokół którego zawija się sąsiednia treść liniowa. Przy wartości domyślnej obszar odpowiada polu marginesu floatu. URL obrazu wyznacza natomiast kształt z alfy obrazu, czyli przezroczystości. Widoczny kolor nie jest sygnałem granicy. Nieprzezroczyste białe tło nadal ma alfę i może sprawić, że ilustracja zachowuje się jak prostokąt. Sprawdź sam plik, a nie tylko białą grafikę na białej stronie. Zachowaj przezroczystość poza sylwetką. Zapisz tę autorską grafikę jako `silhouette.svg`: ```xml ``` Jej rozmiar wewnętrzny to 150 × 180, a CSS używa tej samej szerokości i wysokości. Spójne proporcje ułatwiają kontrolę relacji wyświetlanej grafiki i obrazu kształtu. Obraz w przykładzie jest dekoracyjny, więc ma pusty atrybut alt. Znaczącemu obrazowi nadaj odpowiedni tekst alternatywny na stronie; oblewanie go tekstem nie przekazuje automatycznie jego znaczenia. ## 2. Uruchom kompletny przykład HTML Zapisz to jako `index.html` obok `silhouette.svg`: ```html HTML text around an SVG silhouette

The neighborhood library keeps a small garden beside its reading room. Volunteers label the seedlings, share spare pots, and record which plants attract insects. A curved illustration can sit beside this paragraph while the browser keeps the words in their original order. As the column becomes narrower, the same sentence needs different line breaks. The artwork remains the same size in this example, so the available room beside it changes. After the illustration ends, the paragraph can use the full column again. Editors can revise this text without moving individual words or drawing separate text lines. The layout belongs to the web page, while the SVG supplies the visible silhouette.

``` Udostępnij folder przez HTTP, na przykład za pomocą `python -m http.server 8000`, i otwórz `http://localhost:8000/index.html`. Oba pliki mają wtedy wspólne pochodzenie. Lokalny URL pliku nie jest konfiguracją wczytywania przetestowaną tutaj. Zmień `class="sample narrow contour"` na `class="sample narrow"`, aby porównać zwykłe prostokątne oblewanie floatu. Zmień `narrow` na `wide`, aby sprawdzić kolumnę 520 pikseli. Akapit i obraz pozostają niezmienione. [Dokumentacja display](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/display#flow-root) opisuje `flow-root` jako tworzenie blokowego kontekstu formatowania. Tutaj zamyka on pływający obraz w obrębie próbki. Nie pozycjonuje słów; robi to układ liniowy przeglądarki. ![Rzeczywiste oblewanie tekstu w przeglądarce wokół prostokątnego floatu i konturu alfy SVG w kolumnach 360 i 520 pikseli](https://perfectvector.com/blog/css-text-around-svg-shape/text-flow.webp) *Cztery rzeczywiste układy HTML używają tego samego oryginalnego SVG i akapitu. Warianty konturowe dodają shape-outside i margines kształtu 10px; żadne słowa nie są ustawiane ręcznie.* ## 3. Sprawdź wyrenderowane wiersze przy różnych szerokościach Uruchomiliśmy cztery widoczne próbki w Chromium 155 z Arial 16px i wysokością wiersza 24px. Obraz pozostał 150 × 180px, a kolumny miały stałe szerokości treści 360px i 520px. Obie próbki konturowe używały `shape-margin: 10px` i `shape-image-threshold: 0.5`. | Rzeczywista próbka | Wyrenderowane wiersze tekstu | Początek pierwszego wiersza | Wysokość tekstu | | ------------------ | ---------------------------- | --------------------------- | --------------- | | rectangle-narrow | 18 | 150px | 432px | | rectangle-wide | 13 | 150px | 312px | | contour-narrow | 18 | 115.5px | 432px | | contour-wide | 12 | 115.5px | 288px | Wąski kontur zmienił zawijanie bez zmniejszenia łącznej liczby wierszy. Przy większej szerokości próbka konturowa użyła o jeden wiersz mniej niż prostokątny wariant kontrolny. Zmierzyliśmy natywne prostokąty DOM Range dla każdego słowa i pogrupowaliśmy według pozycji pionowej. To pomiary wyrenderowanych rzędów tekstu, a nie dostęp do wewnętrznych obiektów line-box przeglądarki. Sprawdziliśmy też obliczone ustawienia float i kształtu, wymiary wczytanego obrazu i próbki alfy rzeczywistego SVG. Przy obu szerokościach niektóre wiersze konturowe zaczynały się na lewo od prostokątnej granicy wykluczenia 150px. Tekst wracał też do pełnej kolumny za obrazem. Obserwacje pokazują wpływ badanego konturu na rzeczywisty układ, a nie sam wygląd zrzutu. Dokładne wiersze i współrzędne zależą od czcionki, przeglądarki, akapitu, obrazu i szerokości. Zmiana zdania lub wczytanie innej czcionki może je zmienić. Testuj własną treść w wąskich i szerokich rozmiarach zamiast zachowywać te liczby jako stałe projektu. ## 4. Oddziel margines kształtu, alfę i wczytywanie [`shape-margin`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/shape-margin) rozszerza kształt oblewania, tworząc przestrzeń między nim a tekstem. Wartość 10px jest wyborem układu, a nie zmierzonym minimalnym odstępem każdego widocznego glifu od każdego punktu ilustracji. [Specyfikacja CSS Shapes](https://www.w3.org/TR/css-shapes-1/) zachowuje zwykły model pudełkowy i ogranicza działanie kształtu do pola marginesu floatu. Duży margines kształtu nie nadaje obrazowi większego pudełka CSS. Jeśli projekt wymaga więcej miejsca, sprawdź także wymiary floatu i zwykłe marginesy. [`shape-image-threshold`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/shape-image-threshold) wybiera próg alfy używany do wyodrębnienia kształtu. Oryginalna próbka ma całkowicie przezroczyste otoczenie i nieprzezroczystą grafikę centralną. Miękkie cienie lub półprzezroczyste krawędzie wymagają świadomego progu i oceny wizualnej; zmiana progu nie zamieni nieprzezroczystego tła w przezroczyste. URL obrazu musi też nadawać się do wczytania kształtu. CSS Shapes określa żądanie CORS dla URL obrazów i rezygnuje z niestandardowego kształtu przy błędzie wczytywania. Udostępnienie SVG obok strony eliminuje tu zależność od innego pochodzenia. Jeśli hostuje go CDN, skonfiguruj odpowiedź CORS serwera i sprawdź żądanie oraz układ. Sama widoczność obrazu w `img` nie potwierdza powodzenia żądania kształtu. ## 5. Zachowaj kolejność tekstu i sprawdź gotową stronę Wszystkie cztery badane akapity zachowały dokładnie ten sam tekst w jednym węźle tekstowym, bez elementów `br` i pozycjonowania poszczególnych słów. CSS zmienił wizualne podziały wierszy bez przepisywania kolejności DOM akapitu. Nie przeprowadziliśmy sesji z czytnikiem ekranu ani nie deklarujemy audytu dostępności na podstawie tej kontroli źródła. Zachowaj czytelność akapitu przy niedostępnym obrazie lub zmienionym układzie. W bardzo wąskich kolumnach prostszy układ z obrazem nad akapitem może być czytelniejszy od cienkiego paska tekstu obok. Sprawdź własny breakpoint i treść zamiast zmniejszać tekst dla wymuszenia efektu konturu. Float nadal rezerwuje pudełko CSS. Oblewanie kształtu nie zmienia go w ogólną przeszkodę otaczaną tekstem ze wszystkich stron. W tym przykładzie lewego floatu sąsiedni tekst zawija się po prawej, a następnie biegnie poniżej. ## Napraw objaw u źródła | Objaw | Kontrola i naprawa | | ------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------- | | Tekst podąża za prostokątem | Potwierdź aktywny float, określone wymiary, wczytany URL kształtu i przezroczyste otoczenie źródła. | | Tekst nachodzi na widoczną ilustrację | Porównaj wyświetlany SVG i URL kształtu, ich wymiary i proporcje. Sprawdź próg alfy i margines kształtu. | | Obraz jest widoczny, ale kontur nie działa | Sprawdź żądanie obrazu kształtu i CORS niezależnie od żądania img. Przetestuj wspólne pochodzenie przed dodaniem CDN. | | Dziecko flex lub grid nie zachowuje się jak float | Zachowaj float i akapit w kontenerze zwykłego przepływu, jak w przykładzie, zamiast robić z samego obrazu element flex lub grid. | | Wąski akapit staje się nieczytelny | Zmniejsz obraz lub przenieś go nad tekst przy odpowiednim breakpoincie, a następnie sprawdź rzeczywisty akapit. | | Etykiety SVG nadal się nie zawijają | Użyj procesu tekstu wewnątrz SVG z powyższej tabeli. Shape-outside zmienia sąsiedni przepływ HTML, a nie układ tekstu SVG. | Jeśli odpowiednia płaska ilustracja zachowała się tylko jako raster i potrzebujesz edytowalnej sylwetki, [proces clipartu do SVG PerfectVector](https://perfectvector.com/pl/clipart-to-svg) może pomóc odzyskać kandydata. Porównaj kontur i przezroczyste otoczenie ze źródłem, a potem sprawdź rzeczywisty URL SVG na stronie. Przezroczysty raster także może dostarczyć obrazowy kształt CSS; SVG nie jest wymagane tylko do uruchomienia oblewania według alfy. Zachowaj czysty istniejący SVG, jeśli go masz. Wektoryzacja nie buduje otaczającego układu HTML, nie zachowuje za ciebie semantyki akapitu ani nie gwarantuje konkretnego wyniku zawijania w przeglądarce. ## FAQ **Czy shape-outside zawija tekst wewnątrz SVG?** Nie. Ten przykład zmienia przepływ liniowy HTML obok pływającego obrazu. Etykiety SVG, HTML osadzony w SVG i tekst na ścieżce są różnymi zadaniami układu. **Dlaczego przezroczysto wyglądający SVG nadal oblewany jest jak prostokąt?** Sprawdź nieprzezroczyste tło pliku, błąd żądania kształtu, brak rozmiaru floatu lub kontekst, w którym float jest nieaktywny. Białe piksele nie są przezroczystymi pikselami. **Czy muszę najpierw przekonwertować PNG na SVG?** Nie tylko dla oblewania według alfy. Odpowiedni przezroczysty raster też może dostarczyć kształt. Użyj SVG, gdy uzasadniają to edycja lub inne wymagania wektorowe. **Czy podziały wierszy będą jednakowe na każdym ekranie?** Nie. Dostępna szerokość, metryki czcionki, tekst, rozmiar obrazu i układ przeglądarki wpływają na wiersze. Testuj rzeczywistą treść przy więcej niż jednej szerokości. ## Źródła 1. [MDN shape-outside](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/shape-outside) — opisuje obszary float i kształty obrazu wyznaczane przez alfę. 2. [MDN shape-margin](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/shape-margin) — definiuje odstęp dodawany wokół kształtu oblewania. 3. [MDN shape-image-threshold](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/shape-image-threshold) — definiuje próg alfy kształtów obrazowych. 4. [CSS Shapes Module Level 1](https://www.w3.org/TR/css-shapes-1/) — określa granice pudełka float, wczytywanie obrazów i działanie CORS. 5. [MDN display i flow-root](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/display#flow-root) — wyjaśnia kontekst formatowania zamykający float. Jeśli brakuje edytowalnej grafiki, [przygotuj kandydata clipart SVG](https://perfectvector.com/pl/clipart-to-svg), sprawdź sylwetkę i przezroczystość, a potem zweryfikuj rzeczywisty układ akapitu na stronie przy szerokościach, które chcesz obsługiwać. ## Explore - [Read the HTML article](https://perfectvector.com/pl/blog/css-text-around-svg-shape) - [SVG textLength: dopasuj napis bez zniekształcania liter](https://perfectvector.com/pl/blog/svg-textlength-fit.md) - [Wyrównanie tekstu SVG w pionie: wyśrodkuj odtworzoną etykietę](https://perfectvector.com/pl/blog/svg-text-vertical-alignment.md) - [Product facts](https://perfectvector.com/product-facts.md) - [FAQ](https://perfectvector.com/faq.md) - [Pricing and credits](https://perfectvector.com/pricing.md)