Wektor SVG (.svg)
W3C StandardScalable Vector Graphics (SVG) to oparty na języku XML format grafiki wektorowej przeznaczony do grafiki dwuwymiarowej z obsługą interaktywności, stylów CSS oraz animacji.
Konwertuj SVG na PNG
Darmowy konwerter z SVG na PNG w przeglądarce. Konwertuj pliki natychmiast na swoim urządzeniu.
Kompresuj SVG online
Prywatnie - pliki nigdy nie opuszczają Twojego urządzenia
Inspekcja i metadane
Systemy operacyjne i analizatory plików identyfikują pliki SVG, sprawdzając początkową sekwencję bajtów binarnych:
Podpis nagłówka na poziomie bajtów (Magic Bytes)
Systemy operacyjne i analizatory plików identyfikują pliki SVG, sprawdzając początkową sekwencję bajtów binarnych:
PODPIS HEX (OFFSET 0):
3C 73 76 67REPREZENTACJA ASCII: <svg
Normalizacja: W3C Recommendation (SVG 1.1 / SVG 2)
Specyfikacja techniczna
| Architektura kontenera | Dokument tekstowy znaczników oparty na XML definiujący dwuwymiarową geometrię wektorową |
| Kompresja | Kompresja tekstu Gzip / Brotli (SVGZ wykorzystuje kompresję gzip) |
| Kolejność bajtów (Endianness) | Nie dotyczy (Strumień znaków UTF-8 / UTF-16 oparty na tekście) |
| Przestrzenie kolorów | sRGB, CSS Color Module 4 (Display P3, lab, lch) |
| Kanały i struktura | Kształty wektorowe o nieograniczonej rozdzielczości, krzywe Béziera, typografia oraz maski krycia |
| Maks. wymiary | Niezależny od rozdzielczości (można go skalować bez ograniczeń do dowolnego obszaru wyświetlania bez pikselizacji) |
| Przezroczystość | Pełna, zmienna przezroczystość alfa oraz tryby mieszania CSS |
| Streaming i progresywne ładowanie | Progresywne parsowanie strumienia tekstowego obsługiwane przez parser XML przeglądarki |
Techniczna macierz porównawcza: SVG a konkurencja
| Atrybut techniczny | SVG (Bieżący) | HTML5 Canvas | PNG | |
|---|---|---|---|---|
| Model renderowania | Wektorowy DOM ze sceną zachowaną w pamięci | Natychmiastowy tryb kanwy bitmapowej | Zachowany tryb stałego kontenera strony | Raster pikseli |
| Styl i CSS | Możliwość pełnego stylowania za pomocą klas i zmiennych CSS | Wymaga ponownego rysowania przez API Canvas w JavaScript | Brak dynamicznego stylizowania CSS | Stałe piksele rastrowe |
| Nieskończona skalowalność | Tak (matematyczne krzywe wektorowe) | Wymaga ręcznego skalowania rozdzielczości | Tak (elementy wektorowe) | Nie (pikseluje się przy powiększaniu) |
| Interaktywność | Natywne zdarzenia DOM (najechanie kursorem, kliknięcie, animacje) | Wymaga ręcznych obliczeń wykrywania trafień | Dokument statyczny | Wymaga mapy odsyłaczy lub kanwy |
Typowe tryby uszkodzeń i przewodnik odzyskiwania szesnastkowego
Przeglądarka wyświetla błąd parsowania XML: niezamknięty znacznik lub niedopasowany znacznik.
Główna przyczyna: Nieprawidłowa składnia XML, brakujące znaczniki zamykające lub nieescapowane znaki ampersand ('&' zamiast '&').
Odzyskiwanie: Zweryfikuj za pomocą lintera XML (xmllint file.svg) i popraw nieprawidłowo zagnieżdżone lub niedopasowane znaczniki.
Analiza bezpieczeństwa i wektory ataku na parser
Ponieważ SVG to wykonywalny XML, który obsługuje znaczniki '<script>' oraz zewnętrzne encje, stwarza on poważne zagrożenia XSS i SSRF w przypadku wyświetlania niezaufanych plików SVG.
Znane wektory ataku
- Atak XSS (skrypty między witrynami) przez osadzone znaczniki <script> lub procedury obsługi zdarzenia onload=.
- Ataki XXE (zewnętrzne encje XML) odczytujące lokalne pliki serwera podczas przetwarzania po stronie serwera.
- Rozwinięcie encji XML w ataku „Billion Laughs”, powodujące odmowę usługi.
Najlepsze praktyki obronne: Zawsze oczyszczaj pliki SVG za pomocą biblioteki DOMPurify przed osadzeniem lub serwuj je z nagłówkiem 'Content-Security-Policy: default-src 'none'' bądź jako znaczniki '<img>', które automatycznie wyłączają skrypty.
Pochodzenie historyczne i kamienie milowe
Główne zalety
- Skalowanie bez utraty rozdzielczości: ostre linie i tekst na każdym ekranie i w dowolnej skali wydruku.
- Wyjątkowo mały rozmiar pliku dla logo, ikon i elementów interfejsu użytkownika.
- Można w nim wykonywać skrypty oraz stosować style CSS i JavaScript w DOM przeglądarki.
Ograniczenia techniczne i wady
- Nieodpowiedni do fotografii lub złożonych obrazów o ciągłych przejściach tonalnych.
- Złożone ścieżki wektorowe z tysiącami węzłów mogą obciążać procesor, opóźniać renderowanie i szybko rozładowywać baterię.
- Charakter XML pozwala na osadzanie skryptów, co wymaga rygorystycznego oczyszczania przed renderowaniem niezaufanych plików.
Ciekawe informacje techniczne
- Ponieważ SVG to zwykły tekst XML, kompresja za pomocą Gzip (tworząca plik .svgz) często zmniejsza rozmiar o 70% - 80%.
- Atrybut viewBox definiuje abstrakcyjny obszar współrzędnych, który jest dynamicznie mapowany na fizyczne piksele ekranu.
- Wczesne przeglądarki internetowe nie posiadały początkowo wbudowanych silników SVG, co skłoniło firmę Adobe do dystrybucji wtyczki przeglądarkowej Adobe SVG Viewer, zanim natywna obsługa w przeglądarkach ustabilizowała się około 2011 roku.
Często zadawane pytania techniczne
Czy pliki SVG mogą zawierać złośliwy kod?
Tak. Ponieważ SVG jest poprawnym dokumentem XML, może zawierać osadzony kod JavaScript ('<script>'), który wykonuje się, jeśli plik SVG zostanie załadowany bezpośrednio w przeglądarce lub osadzony w elemencie '<svg>'. Udostępnianie plików SVG za pomocą znacznika '<img>' automatycznie neutralizuje wykonywanie skryptów.
Kiedy powinienem używać SVG zamiast PNG?
Używaj SVG do ikon, logo, wykresów, ilustracji oraz typografii, które muszą być wyraźne przy skalowaniu do różnych rozmiarów ekranów, a pliki muszą być małe. Do fotografii używaj formatu PNG lub WebP.
Jak mogę zoptymalizować duże lub złożone pliki SVG?
Możesz oczyścić ścieżki wektorowe, usuwając zbędne metadane, komentarze edytora (z programów Inkscape lub Illustrator), niewidoczne grupy oraz nieużywane deklaracje przestrzeni nazw za pomocą narzędzi takich jak SVGO lub poprzez uruchomienie kompresji SVG.
Powiązane pary konwersji SVG
Konwersja plików wektorowych SVG na obrazy rastrowe PNG przekształca skalowalną grafikę opartą na kodzie w siatki o stałych pikselach, zapewniając uniwersalną zgodność z aplikacjami.
Umieść rastrowe obrazy PNG w wektorowym kontenerze SVG XML, aby responsywnie skalować je na stronach internetowych i integrować z układami obsługującymi grafikę wektorową.
Przekształcaj starsze 16-bitowe zapisy rysunków wektorowych Windows GDI w nowoczesne, skalowalne ścieżki SVG bez utraty rozdzielczości.
Konwertuj 32-bitowe grafiki Windows Enhanced Metafile na czyste, responsywne wektory SVG do wykorzystania w Internecie oraz oprogramowaniu projektowym.
Konwersja rysunku DXF do formatu SVG przekształca złożone inżynierskie dane wektorowe w lekką grafikę XML dla przeglądarek internetowych i edytorów wektorowych.
Konwersja grafiki wektorowej SVG do formatu DXF przekształca obrazy internetowe w precyzyjne współrzędne matematyczne wymagane przez oprogramowanie CAD.
Udostępnij logo lub ilustrację SVG jako jednostronicowy plik PDF. Jej skalowalne ścieżki stają się obrazem o stałej rozdzielczości, więc powiększanie nie przywróci szczegółów wektorowych.