Softonic

Zmień rozmiar SVG

Krok 1 / 2
Dalej

SVG to format wektorowy, więc jest niezależny od rozdzielczości i pozostaje idealnie ostry w każdym rozmiarze. “Zmiana rozmiaru” SVG nie rasteryzuje go ani nie zmienia rysunku: to narzędzie po prostu ustawia nowe width i height w pikselach w elemencie głównym <svg>, czyli jego zadeklarowany rozmiar wyświetlania. viewBox, ścieżki i każda współrzędna pozostają dokładnie takie, jakie są, więc rysunek zachowuje proporcje i nie traci jakości. Wklej swój znacznik, ustaw szerokość i wysokość, obejrzyj wynik w podglądzie, a następnie skopiuj go lub pobierz.

Jak zmienić rozmiar SVG

  1. 1

    Wklej SVG

    Wklej pełny znacznik `<svg>...</svg>` do pola tekstowego.

  2. 2

    Ustaw szerokość i wysokość

    Wpisz nową szerokość i wysokość w pikselach.

  3. 3

    Podgląd na żywo

    Narzędzie przepisuje `width` i `height` w głównym `<svg>` (lub dodaje je, jeśli ich brakuje) i od razu pokazuje wynik.

  4. 4

    Skopiuj lub pobierz

    Skopiuj zaktualizowany znacznik do schowka lub zapisz go jako plik `.svg`.

Rozmiar wyświetlania a viewBox

SVG ma rozmiar wyświetlania (width/height) i własny układ współrzędnych (viewBox).

<svg width="200" height="200" viewBox="0 0 100 100">
    <circle cx="50" cy="50" r="40" />
</svg>

Ten SVG ma na ekranie 200 x 200 pikseli, podczas gdy jego wewnętrzne współrzędne biegną od 0 do 100. Okrąg z r="40" wypełnia około 80% viewBoxa, więc renderuje się na mniej więcej 160 px szerokości. To narzędzie zmienia wyłącznie width i height, czyli zadeklarowany rozmiar wyświetlania. Nie rusza viewBoxa ani współrzędnych i właśnie dlatego rysunek zachowuje proporcje i pozostaje ostry: mówisz przeglądarce, aby narysowała ten sam obraz w innym rozmiarze, a nie żeby go przerysowała.

Dlaczego SVG może wyglądać tak samo po zmianie rozmiaru

Jeśli SVG jest osadzony za pomocą czegoś w rodzaju <img src="ikona.svg" width="500"> lub wymiarowany przez CSS, to otaczająca strona kontroluje rozmiar wyświetlania i nadpisuje width/height z pliku. W takim przypadku zmień rozmiar tam, gdzie SVG jest używany (w <img>, w CSS lub w kontenerze), a nie tylko wewnątrz znacznika.

Kreski i tekst pozostają ostre

Ponieważ nic nie jest rasteryzowane, tekst pozostaje prawdziwym tekstem wektorowym, a linie pozostają gładkie w każdym rozmiarze. Grubości kresek są zdefiniowane w układzie współrzędnych, więc skalują się razem z rysunkiem. Aby kreska zachowała tę samą wizualną grubość niezależnie od rozmiaru, dodaj vector-effect="non-scaling-stroke" do tego elementu w swoim źródle przed zmianą rozmiaru.

Utrzymuj znacznik w czystości

Pliki SVG eksportowane z Figmy, Illustratora czy Sketcha często niosą dodatkowy balast: przestrzenie nazw edytora (sodipodi:, inkscape:), ukryte metadane i nieużywane <defs>. To narzędzie pozostawia twój znacznik bez zmian poza rozmiarem. Aby usunąć balast, przepuść plik przez optymalizator taki jak SVGO przed zmianą rozmiaru lub po niej.

Najczęściej zadawane pytania

Nie. Ustawia tylko width i height w głównym <svg>. viewBox, ścieżki i każda współrzędna pozostają nietknięte, więc grafika zachowuje swoje dokładne proporcje.

Zwykle to strona kontroluje rozmiar: szerokość w <img>, reguła CSS lub kontener nadpisują własne wymiary pliku. Zmień rozmiar tam, gdzie SVG jest używany, a nie tylko w znaczniku.

Tak. SVG to format wektorowy, więc nic nie jest rasteryzowane, a tekst i kreski pozostają ostre w każdym rozmiarze. Jeśli plik źródłowy już zamienił tekst na ścieżki, skaluje się on jak każdy inny kształt, i nadal jest ostry.

Tak. Zmieniane są tylko width i height; <animate>, <script>, procedury obsługi zdarzeń oraz CSS wewnątrz SVG pozostają nietknięte.

Znacznik jest wysyłany na nasz serwer w celu wyrenderowania podglądu po zmianie rozmiaru i nie jest przechowywany po zakończeniu żądania. Nie jest zapisywany ani udostępniany.

Powiązane narzędzia

Próbnik kolorów Material Design

Przeglądaj paletę kolorów Material Design. Kopiuj dowolny odcień (od 50 do A700) w formacie HEX, RGB lub HSL jednym dotknięciem.

Generator papieru w kratkę

Twórz papier w kratkę do druku online: wybierz siatkę lub kropki, ustaw odstęp w mm, wybierz A4 lub Letter oraz własny kolor linii, a następnie wydrukuj lub pobierz czytelny plik SVG.

Kreator flag

Zaprojektuj w przeglądarce prostą własną flagę 3:2 z sześcioma układami, kolorami, tekstem i symbolem. Pobierz SVG lub PNG albo otwórz okno drukowania przeglądarki.

Kreator wzorów haftu krzyżykowego

Zamień plik JPEG, PNG lub WebP w schemat haftu krzyżykowego: 10–150 krzyżyków, 2–40 własnych kolorów, symbole, dokładne liczby ściegów i wymiary kanwy.

Generator napisów graffiti

Twórz napisy graffiti w stylu tag, bubble, block, stencil, neon i wild. Dobierz kolory i wyeksportuj PNG lub SVG bezpośrednio w przeglądarce.

Generator papieru w linie

Twórz papier w linie do druku za darmo. Wybierz linie szerokie, standardowe lub wąskie, ustaw odstęp między liniami w mm, format strony i linię marginesu, a następnie wydrukuj lub pobierz plik SVG.

Narzędzie jest dostępne w innych językach