SVG-editor
Bewerk SVG-bestanden in je browser. Plak code, bekijk live, wijzig afmetingen en kleuren, download gewijzigde SVG.
Belangrijkste functies
- Live voorvertoning van SVG-code
- Bewerken van breedte, hoogte en viewBox
- Kleuren zoeken en vervangen
- Aangepaste SVG downloaden of kopiëren
Guide
SVG (Scalable Vector Graphics) is een op XML gebaseerd afbeeldingsformaat dat vormen, paden en tekst beschrijft met wiskundige coördinaten in plaats van pixelpatronen. In tegenstelling tot rasterformaten (PNG, JPEG, WebP) schaalt SVG-afbeeldingen naar elke grootte zonder kwaliteitsverlies. Een 24px-pictogram en een billboard-groot logo kunnen hetzelfde SVG-bestand gebruiken. Dit maakt SVG het standaardformaat voor pictogrammen, logo's, illustraties, grafieken en elke grafiek die helder moet renderen op meerdere groottes. Deze gids behandelt SVG-structuur, bewerkingstechnieken, optimalisatiestrategieën en praktisch gebruik in webontwikkeling. Een SVG-bestand is een tekstdocument. Je kunt het openen in elke code-editor en lezen. Het root-element is <svg> met attributen voor width, height en viewBox. De viewBox definieert het coördinatensysteem: viewBox="0 0 100 100" betekent dat het tekengebied zich uitstrekt van (0,0) tot (100,100). Binnen het <svg>-element vind je vorm-elementen zoals <rect>, <circle>, <ellipse>, <line>, <polyline>, <polygon> en <path>. Elk element heeft attributen die zijn geometrie, vulkleur, lijnkleur, lijnbreedte en andere visuele eigenschappen definiëren. Deze structuur begrijpen is essentieel voor het effectief bewerken van SVG's, want elke visuele verandering die je in een grafische editor maakt, koppelt naar een verandering in deze XML-opmaak. Het <path>-element is het krachtigste en meest complexe SVG-element. Het gebruikt een compacte reeks commando's in zijn d-attribuut om elke willekeurige vorm te beschrijven. De commando's zijn: M (move to), L (line to), H (horizontal line), V (vertical line), C (cubic Bezier curve), S (smooth cubic Bezier), Q (quadratic Bezier curve), T (smooth quadratic Bezier), A (elliptical arc) en Z (close path). Hoofdletters gebruiken absolute coördinaten. Kleine letters gebruiken relatieve coördinaten. Een typisch pad ziet eruit als d="M10 10 L90 10 L90 90 L10 90 Z\
Veelgestelde vragen
Is mijn SVG-data veilig?
Ja, alle verwerking gebeurt in je browser. Er worden geen gegevens naar een server geüpload.
Kan ik complexe SVG's bewerken?
Ja, je kunt elke geldige SVG-code bewerken. De tool ondersteunt alle standaard SVG-elementen en -attributen.
