SVG for webdesignere på 60 sekunder

Bitmap-bilder som JPEG, GIF og PNG ser alt forferdelig ut når du skaler dem opp, så hvis du vil opprettholde kvalitet på store dimensjoner, må du øke filstørrelsen. SVG-bilder, men (som står for skalerbar vektorgrafik) ser nøyaktig ut det samme, uavhengig av dimensjonene de skaleres til og De beholder samme filstørrelse. 

La oss se på SVGs for webdesign, på seksti sekunder!

Forstå SVG for webdesign

 

SVGer kan brukes med CSS som bakgrunn, eller du kan plassere dem i innhold som vanlige bilder. Du kan lage ikoner og logoer som alltid ser perfekt ut i hvilken som helst størrelse, de kan animeres og morphed, og du kan bruke kule filtre og effekter på dem (sjekk SVG-filterdemoen av Lucas Bebber nedenfor). Du kan til og med kontrollere fargen med CSS.

På innsiden er en SVG-fil bare lesbar, redigerbar XML-kode. Og tekst innenfor SVG er vanlig, indekserbar, søkemotor-vennlig tekst.

Du kan lage SVGer med nesten alle vektorgrafikredigeringsprogrammer, som Affinity Designer, Boxy SVG, Illustrator, Gravit Designer eller Inkscape. Bare opprett bildet ditt, eksporter det som SVG, og det er klart for bruk på nettsteder. Det er SVG for webdesign, på seksti sekunder!

Mer nyttige SVG-ressurser