SVG voor webontwerpers in 60 seconden

Bitmapafbeeldingen zoals JPEG's, GIF's en PNG's zien er allemaal vreselijk uit als u ze opschaalt, dus als u de kwaliteit op grote dimensies wilt behouden, moet u de bestandsgrootte vergroten. SVG-afbeeldingen echter (die staan ​​voor Scalable Vector Graphics) zien er allemaal hetzelfde uit, ongeacht de dimensies waarnaar ze worden geschaald en ze behouden dezelfde bestandsgrootte. 

Laten we SVG's voor webontwerp in zestig seconden bekijken!

SVG begrijpen voor webontwerp

SVG's kunnen vis CSS als achtergronden worden gebruikt, of u kunt ze in inhoud plaatsen als gewone afbeeldingen. U kunt pictogrammen en logo's maken die er altijd perfect uitzien op elk formaat, ze kunnen geanimeerd en gemodereerd zijn en u kunt coole filters en effecten toepassen (bekijk de SVG-filter demo van Lucas Bebber hieronder). Je kunt zelfs hun kleur bepalen met CSS.

Van binnen is een SVG-bestand slechts leesbare, bewerkbare XML-code. En tekst binnen SVG's is normaal, indexeerbaar, zoekmachine vriendelijke tekst.

U kunt SVG's maken met vrijwel elk grafisch vectorbewerkingsprogramma, zoals Affinity Designer, Boxy SVG, Illustrator, Gravit Designer of Inkscape. Gewoon uw afbeelding maken, deze exporteren als SVG en klaar voor gebruik op uw websites. Dat is SVG voor webontwerp, in zestig seconden!

Meer nuttige SVG-bronnen