Softonic

SVG-formaat aanpassen

Stap 1 / 2
Volgende

SVG is een vectorformaat en is dus resolutieonafhankelijk: het blijft messcherp op elke grootte. Het “aanpassen” van een SVG rastert hem niet en verandert de tekening niet: deze tool stelt simpelweg een nieuwe width en height in pixels in op het wortelelement <svg>, oftewel de aangegeven weergavegrootte. De viewBox, de paden en elke coördinaat blijven precies zoals ze zijn, dus de tekening behoudt haar verhoudingen en verliest geen kwaliteit. Plak je markup, stel de breedte en hoogte in, bekijk het resultaat in een voorbeeld en kopieer of download het.

Het formaat van een SVG aanpassen

  1. 1

    Plak de SVG

    Plak de volledige `<svg>...</svg>`-markup in het tekstvak.

  2. 2

    Stel breedte en hoogte in

    Voer de nieuwe breedte en hoogte in pixels in.

  3. 3

    Live voorbeeld

    De tool herschrijft de `width` en `height` op de wortel-`<svg>` (of voegt ze toe als ze ontbreken) en toont het resultaat meteen.

  4. 4

    Kopieer of download

    Kopieer de bijgewerkte markup naar het klembord of sla hem op als `.svg`-bestand.

Weergavegrootte versus de viewBox

Een SVG heeft een weergavegrootte (width/height) en een eigen coördinatenstelsel (viewBox).

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

Deze SVG is 200 x 200 pixels op het scherm, terwijl de interne coördinaten van 0 tot 100 lopen. De cirkel met r="40" vult ongeveer 80% van de viewBox, dus hij wordt zo’n 160 px breed weergegeven. Deze tool wijzigt alleen de width en height, de aangegeven weergavegrootte. Hij raakt de viewBox en de coördinaten niet aan, en juist daarom behoudt de tekening haar verhoudingen en blijft ze scherp: je zegt de browser dezelfde afbeelding op een andere grootte te tekenen, niet om ze opnieuw te tekenen.

Waarom een SVG er hetzelfde uit kan zien nadat je de grootte hebt gewijzigd

Als de SVG met iets als <img src="icoon.svg" width="500"> wordt geplaatst of via CSS wordt geschaald, bepaalt de omringende pagina de weergavegrootte en overschrijft die de width/height in het bestand. Wijzig in dat geval de grootte waar de SVG wordt gebruikt (de <img>, de CSS of de container), niet alleen in de markup.

Lijnen en tekst blijven scherp

Omdat er niets wordt gerasterd, blijft tekst echte vectortekst en blijven lijnen glad op elke grootte. Lijndiktes zijn in het coördinatenstelsel gedefinieerd en schalen dus mee met de tekening. Wil je dat een lijn dezelfde visuele dikte houdt ongeacht de grootte, voeg dan vector-effect="non-scaling-stroke" toe aan dat element in je bron voordat je het formaat aanpast.

Houd de markup schoon

SVG’s die uit Figma, Illustrator of Sketch worden geëxporteerd, dragen vaak extra ballast: editornaamruimten (sodipodi:, inkscape:), verborgen metadata en ongebruikte <defs>. Deze tool laat je markup ongewijzigd, op de grootte na. Om de ballast te verwijderen, haal je het bestand door een optimalisator zoals SVGO voor of na het aanpassen.

Veelgestelde vragen

Nee. Het stelt alleen de width en height in op de wortel-<svg>. De viewBox, de paden en elke coördinaat blijven onaangeroerd, dus de illustratie behoudt haar exacte verhoudingen.

Meestal bepaalt de pagina de grootte: een breedte op de <img>, een CSS-regel of een container overschrijft de eigen afmetingen van het bestand. Wijzig de grootte waar de SVG wordt gebruikt, niet alleen in de markup.

Ja. SVG is een vectorformaat, dus er wordt niets gerasterd en tekst en lijnen blijven scherp op elke grootte. Heeft het bronbestand tekst al naar paden omgezet, dan schaalt die als elke andere vorm, en blijft nog steeds scherp.

Ja. Alleen de width en height worden gewijzigd; <animate>, <script>, gebeurtenis-handlers en CSS binnen de SVG blijven ongemoeid.

De markup wordt naar onze server gestuurd om het aangepaste voorbeeld te renderen en wordt na het verzoek niet bewaard. Hij wordt niet opgeslagen of gedeeld.

Gerelateerde tools

Material Design-kleurkiezer

Blader door het Material Design-kleurenpalet. Kopieer elke tint (van 50 tot A700) als HEX-, RGB- of HSL-waarde met één tik.

Contactblad maken

Rangschik foto’s op afdrukbare A4- of Letter-contactbladen met bijschriften en voorvertoning en download JPEG-pagina’s of een pdf.

Gelinieerd papier generator

Maak gratis afdrukbaar gelinieerd papier. Kies college-, brede of smalle liniëring, stel de regelafstand in mm, het papierformaat en een kantlijn in, en druk af of download de SVG.

Kruissteekpatroon maken

Zet JPEG, PNG of WebP om in een afdrukbaar kruissteekpatroon van 10–150 steken met 2–40 eigen kleuren, symbolen, exacte aantallen en stofmaten.

Ruitjespapier-generator

Maak online afdrukbaar ruitjespapier: kies een ruit- of stippenraster, stel de afstand in mm in, kies A4 of Letter en een eigen lijnkleur, en print of download een strak SVG-bestand.

Instagram-grid-splitter

Verdeel een brede afbeelding in een 3×3 Instagram-grid, of in een willekeurig aantal rijen. De tegels zijn genummerd, zodat je ze eenvoudig in omgekeerde volgorde kunt uploaden.

Tool beschikbaar in andere talen