Traditionele beeldformaten zoals JPG, PNG of GIF zijn erg populair, maar ze hebben ook nadelen dat maakt het minder dan ideaal voor bepaalde toepassingen.
Als u het maken van een responsive website bijvoorbeeld, u wilt dat afbeeldingen die er goed uitzien, ongeacht de breedte en hoogte zij worden weergegeven in. Traditionele foto ‘ s kijk slecht als je vergroot ze te veel voor de aanleg.
U kan nodig zijn om het beeld in verschillende maten, bijvoorbeeld als een miniatuur op een blog van de index pagina, en een volledige resolutie van de afbeelding in het gelinkte artikel.
Terwijl u kunt verschillende versies van een enkele afbeelding, zodat de meest geschikte is opgenomen, betekent dit dat u meer opslagruimte nodig voor onder andere dingen.
De SVG-afbeelding formaat is een vector-formaat. Dit betekent dat de grootte kan worden verlaagd of verhoogd, zonder verlies van kwaliteit (schaalbaar). Dat is geweldig als u nodig hebt om het beeld in meerdere plaatsen met verschillende resoluties.
Andere voordelen van SVG zijn dat de grootte is meestal veel kleiner, en dat geeft webmasters enige flexibiliteit als het gaat om het aanbrengen van wijzigingen, zoals sommigen gedaan kan worden in het CSS-direct.
Een voorbeeld: Terence Eden opnieuw de logo ‘ s van de populaire internetbedrijven als Twitter, Amazon, WhatsApp, YouTube of Reddit in SVG. De grootte van de logo ‘ s is teruggebracht tot minder dan 1 Kilobyte, soms zo laag als 200 bytes. Het Twitter-logo in PNG-formaat bijvoorbeeld heeft een grootte van 20 Kilobytes, de SVG-versie van de grootte van 397 bytes.
SVG is een goede indeling voor logo ‘s en iconen, maar niet echt geschikt als het gaat om foto’ s en andere types van afbeeldingen die veel verschillende objecten.
Het omzetten naar SVG
Deze gids richt zich op toepassingen die u kunt gebruiken voor het converteren van afbeeldingen naar SVG direct. Dit is niet een tutorial over het gebruik van toepassingen ontworpen om vectorafbeeldingen te maken vanaf scratch. U kunt gebruik maken van vector graphics editors zoals Adobe Illustrator (ons geen links naar Adobe-beleid nog steeds staat), Inkscape, of LibreOffice Draw.
Lees ook: Microsoft afgesloten CodePlex op 15 December 2017
Tal van gratis conversie programma ‘ s beschikbaar die u kunt uitvoeren online, maar ze zijn vrij beperkt als het gaat om het conversie proces. Terwijl ze voldoende kan zijn voor het omzetten van een eenvoudig logo is beschikbaar als een png of jpg, svg, de resultaten zijn niet super goed de meeste van de tijd.
Hier is hoe ik een evaluatie van de diensten: ik gedownload van de Ghacks logo, en probeerde de conversies op enkele tientallen SVG-converters. Ik beoordeeld op het resultaat, en weggegooid elke dienst die niet tot een goed resultaat.
- Aconvert — De dienst neemt een lokaal bestand of een URL als input. De enige optie die het biedt, is de resolutie van de afbeelding. De resulterende afbeelding leek op de Ghacks logo, maar de grootte was bijna het dubbele van de grootte van de PNG-versie van het logo.
- Vector Magische — Beschikbaar als een online converter en desktop-programma voor Windows. Het is niet gratis maar online (kosten $7,95 per maand, desktop edition een eenmalige betaling van $295). De resultaten van de online editie zijn geweldig maar, en je krijgt veel van de opties voor het bewerken of wijzigen van de instellingen, en een side-by-side weergave van het originele beeld en het svg-kopiëren.
- Vectorizer — een Andere gratis dienst. Deze wordt geleverd met een wizard die u kunt kiezen van de beste output-parameters (blur, kleuren), of u kunt deze direct. De resultaten waren goed met wat tweaken, en de grootte van de resulterende afbeelding is een derde minder dan de originele PNG-logo.
Nu aan u:U Weet van een andere online dienst of programma om afbeeldingen te converteren naar een SVG-indeling?