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

Skapa LEGO-mosaik av ett foto

Gör en mosaikplan av ett foto med 16 × 16, 32 × 32, 48 × 48 eller 64 × 64 rutor. Förhandsvisa ungefärliga färger, räkna 1×1-plattor och ladda ner en numrerad byggguide.

Skapa notpapper

Skapa notpapper att skriva ut: tomma notsystem, G-klav eller F-klav, pianosystem eller gitarrtabulatur. Välj antal, linjeavstånd, A4 eller Letter och marginaler och ladda ned PDF eller SVG.

Streckkodsläsare

Välj en bild med en streckkod och läs dess kodade värde och typ. Stöder EAN-13, UPC-A och Code 128 samt kontrollsiffra för EAN och UPC.

Triadisk färggenerator

Välj en basfärg och få dess två triadiska partner, roterade exakt 120° och 240° på färghjulet, som HEX-koder du kopierar med ett klick.

Skapa presentkort

Skapa ett presentkort med företagsnamn, mottagare, belopp, hälsning och giltighetsdatum. Välj en mall och skriv ut eller ladda ner som PNG.

Skapa meny

Skapa en ensidig restaurang- eller kafémeny med redigerbara avsnitt, rätter, priser och färger, liveförhandsvisning samt nedladdning i SVG och PNG.

Verktyget finns på andra språk