Softonic

Ändra storlek på SVG

Steg 1 / 2
Nästa

SVG är ett vektorformat, så det är upplösningsoberoende och förblir knivskarpt i alla storlekar. Att “ändra storlek” på en SVG rastrerar den inte och ändrar inte ritningen: det här verktyget anger helt enkelt en ny width och height i pixlar på rotelementet <svg>, alltså dess deklarerade visningsstorlek. viewBox, banorna och varje koordinat lämnas exakt som de är, så ritningen behåller sina proportioner och förlorar ingen kvalitet. Klistra in din markup, ange bredd och höjd, förhandsgranska resultatet och kopiera eller ladda ner det.

Så ändrar du storlek på en SVG

  1. 1

    Klistra in SVG:n

    Klistra in den fullständiga `<svg>...</svg>`-markupen i textrutan.

  2. 2

    Ange bredd och höjd

    Ange den nya bredden och höjden i pixlar.

  3. 3

    Förhandsvisa live

    Verktyget skriver om `width` och `height` på rot-`<svg>`:n (eller lägger till dem om de saknas) och visar resultatet direkt.

  4. 4

    Kopiera eller ladda ner

    Kopiera den uppdaterade markupen till urklipp eller spara den som en `.svg`-fil.

Visningsstorlek kontra viewBox

En SVG har en visningsstorlek (width/height) och ett eget koordinatsystem (viewBox).

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

Den här SVG:n är 200 x 200 pixlar på skärmen, medan dess interna koordinater går från 0 till 100. Cirkeln med r="40" fyller ungefär 80 % av viewBox, så den renderas cirka 160 px bred. Det här verktyget ändrar bara width och height, alltså den deklarerade visningsstorleken. Det rör varken viewBox eller koordinaterna, och det är just därför ritningen behåller sina proportioner och förblir skarp: du säger åt webbläsaren att rita samma bild i en annan storlek, inte att rita om den.

Varför en SVG kan se likadan ut efter att du ändrat storleken

Om SVG:n placeras med något i stil med <img src="ikon.svg" width="500"> eller storleksbestäms med CSS, är det den omgivande sidan som styr visningsstorleken och åsidosätter width/height i filen. Ändra i så fall storleken där SVG:n används (i <img>, i CSS eller i behållaren), inte bara inne i markupen.

Linjer och text förblir skarpa

Eftersom inget rastreras förblir text riktig vektortext och linjer förblir jämna i alla storlekar. Linjebredder definieras i koordinatsystemet, så de skalas tillsammans med ritningen. Om du vill att en linje ska behålla samma visuella tjocklek oavsett storlek, lägg till vector-effect="non-scaling-stroke" på det elementet i din källa innan du ändrar storlek.

Håll markupen ren

SVG:er som exporteras från Figma, Illustrator eller Sketch bär ofta på extra barlast: editornamnrymder (sodipodi:, inkscape:), dold metadata och oanvända <defs>. Det här verktyget lämnar din markup som den är, bortsett från storleken. För att skala bort skräpet, kör filen genom en optimerare som SVGO före eller efter storleksändringen.

Vanliga frågor

Nej. Det anger bara width och height på rot-<svg>:n. viewBox, banorna och varje koordinat lämnas orörda, så illustrationen behåller sina exakta proportioner.

Oftast är det sidan som styr storleken: en bredd på <img>, en CSS-regel eller en behållare åsidosätter filens egna mått. Ändra storleken där SVG:n används, inte bara i markupen.

Ja. SVG är ett vektorformat, så inget rastreras och text och linjer förblir skarpa i alla storlekar. Om källfilen redan omvandlat text till banor skalas den som vilken annan form som helst, och är fortfarande skarp.

Ja. Endast width och height ändras; <animate>, <script>, händelsehanterare och CSS inuti SVG:n lämnas orörda.

Markupen skickas till vår server för att rendera den storleksändrade förhandsvisningen och sparas inte efter förfrågan. Den lagras inte och delas inte.

Relaterade verktyg

Material Design-färgväljare

Bläddra i Material Design-färgpaletten. Kopiera valfri nyans (50 till A700) som HEX, RGB eller HSL med en tryckning.

Rutpappersgenerator

Skapa utskrivbart rutpapper online: välj rutnät eller punktnät, ange avståndet i mm, välj A4 eller Letter och en egen linjefärg, och skriv sedan ut eller ladda ner en skarp SVG.

Flaggskapare

Formge en enkel egen 3:2-flagga i webbläsaren med sex layouter, färger, text och en symbol. Hämta SVG eller PNG, eller öppna webbläsarens utskriftsdialog.

Skapa kontaktkarta

Ordna foton på utskrivbara kontaktkartor i A4 eller Letter med bildtexter och beskärning, förhandsgranska och hämta JPEG eller PDF.

Skapa visionboard

Förvandla dina mål till en visuell tavla: ladda upp bilder, lägg till en personlig rubrik och bildtexter, välj färger och layout och hämta en utskrivbar PNG. Allt stannar i din webbläsare.

Skapa korsstygnsmönster

Gör JPEG, PNG eller WebP till ett utskrivbart korsstygnsdiagram med 10–150 stygn, 2–40 egna färger, symboler, exakta antal och tygmått.

Verktyget finns på andra språk