Edytor SVG
Edit SVG files in your browser. Paste code, preview live, change dimensions and colors, download modified SVG.
Najwazniejsze funkcje
- Podgląd kodu SVG na żywo
- Edycja szerokości, wysokości i viewBox
- Znajdowanie i zamienianie kolorów
- Pobieranie lub kopiowanie zmodyfikowanego SVG
Guide
SVG (Scalable Vector Graphics) to oparty na XML format obrazu, który opisuje kształty, ścieżki i tekst używając matematycznych współrzędnych zamiast siatek pikseli. W przeciwieństwie do formatów rastrowych (PNG, JPEG, WebP), obrazy SVG skalują się do dowolnego rozmiaru bez utraty jakości. Ikona 24px i logo o rozmiarze billboardu mogą używać tego samego pliku SVG. To czyni SVG standardowym formatem dla ikon, logotypów, ilustracji, wykresów i jakiejkolwiek grafiki, która musi renderować się ostro w wielu rozmiarach. Ten przewodnik obejmuje strukturę SVG, techniki edycji, strategie optymalizacji i praktyczne użycie w rozwoju webowym. Plik SVG to dokument tekstowy. Możesz otworzyć go w dowolnym edytorze kodu i przeczytać. Elementem głównym jest <svg> z atrybutami dla width, height i viewBox. ViewBox definiuje system współrzędnych: viewBox="0 0 100 100" oznacza, że obszar rysowania rozciąga się od (0,0) do (100,100). Wewnątrz elementu <svg> znajdziesz elementy kształtu jak <rect>, <circle>, <ellipse>, <line>, <polyline>, <polygon> i <path>. Każdy element ma atrybuty, które definiują jego geometrię, kolor wypełnienia, kolor obrysu, szerokość obrysu i inne właściwości wizualne. Zrozumienie tej struktury jest istotne dla skutecznej edycji SVG, bo każda zmiana wizualna, którą wprowadzasz w edytorze graficznym, mapuje się do zmiany w tym znaczniku XML. Element <path> to najbardziej potężny i najbardziej złożony element SVG. Używa kompaktowego ciągu poleceń w swoim atrybucie d, by opisać dowolny kształt. Polecenia to: M (przesuń do), L (linia do), H (linia pozioma), V (linia pionowa), C (krzywa Beziera trzeciego stopnia), S (gładka krzywa Beziera trzeciego stopnia), Q (krzywa Beziera drugiego stopnia), T (gładka krzywa Beziera drugiego stopnia), A (łuk eliptyczny) i Z (zamknij ścieżkę). Wielkie litery używają współrzędnych absolutnych. Małe litery używają współrzędnych relatywnych. Typowa ścieżka wygląda jak d="M10 10 L90 10 L90 90 L10 90 Z\
Czeste pytania
Czy moje dane SVG są bezpieczne?
Tak, całe przetwarzanie odbywa się w Twojej przeglądarce. Żadne dane nie są przesyłane na żaden serwer.
Czy mogę edytować złożone pliki SVG?
Tak, możesz edytować dowolny poprawny kod SVG. Narzędzie obsługuje wszystkie standardowe elementy i atrybuty SVG.
