Need help? Chat now!

Hostwinds Blog

Zoekresultaten voor:


SVG-afbeeldingen op uw site gebruiken: het goede en niet zo geweldig Uitgelichte afbeelding

SVG-afbeeldingen op uw site gebruiken: het goede en niet zo geweldig

door: Hostwinds Team  /  juni- 26, 2017


Wat is SVG?

Je bent zeker bekend met de beeldformaten JPEG, GIF en PNG.Maar weet u over SVG?SVG staat voor schaalbare vectorafbeeldingen.In tegenstelling tot enkele van de andere meer gebruikelijke afbeeldingen die worden gedefinieerd door PIXELS, zijn SVG-bestanden op basis van XML-syntaxis.Ze vertonen perfect, ongeacht welke resolutie ze worden bekeken, wat hen een ideaal beeldformaat kan maken voor gebruik op het web.Er zijn echter ook redenen waarom u misschien twee keer wilt nadenken voordat u het gebruikt.

Waarin verschilt het van PNG, JPEG?

PNG, JPEG en GIF staan bekend als rasterafbeeldingen.Deze grafische indelingen zijn gebaseerd op pixel.Dit betekent dat ze zijn samengesteld uit een raster van veelkleurige dozen.Als u bijvoorbeeld een afbeelding hebt die 5 pixels is met 5 pixels, betekent dit dat het 25 gekleurde vierkanten heeft.Dit kan op geen enkele manier worden gewijzigd.Je kunt niet zomaar meer kleuren toevoegen aan de vierkanten.En je kunt er geen meer detail toe aan hen toevoegen of verplaatsen.

Als u besluit het beeld met meer dan 100% uit te breiden, is het resulterende effect pixelatie en verschijnt het beeld wazig.

Aan de andere kant zijn SVG-afbeeldingen vectorafbeeldingen. Ze bestaan dus niet uit kleuren, maar uit beschrijvingen van uw afbeelding. Deze beschrijving kan worden gewijzigd en gewijzigd in elk formaat zonder de kwaliteit van de afbeelding te beïnvloeden.

Waarom zou ik SVG-afbeeldingen gebruiken?

Geen pixelvorming

U kunt uw SVG-bestand op elk formaat weergeven en de afbeelding wordt niet pixelated.Zelfs als je een kleine afbeelding uitbreidt en het groter kunt maken, zal het nog steeds zijn scherpte en kleur behouden ... en misschien er nogal ongewenst er wazig uitzien.Dit komt door het oneindige aantal details dat vectorbeelden kunnen bevatten vanwege hun vectorvorm.

Klein afbeeldingsformaat

De beeldgrootte van SVG-bestanden is kleiner dan die van andere grafische afbeeldingen, zoals JPEG- of PNG-bestanden. Dus als je dramatisch kleinere afbeeldingen wilt, moet het kiezen van SVG-afbeeldingen gemakkelijk helpen je dat te bereiken.

Voor grafische afbeeldingen wordt de grootte van het bestand beïnvloed door de grootte van de resolutie.Maar SVG-beeldresoluties veranderen niet.In plaats daarvan is het het aantal details dat zich in de laag bevindt die belangrijk is, zodat de grootte van het bestand niet toeneemt terwijl u de grootte van de afbeelding verhoogt.

Geanimeerde afbeeldingen

Als u bekend bent met Web Development, kunt u zelfs uw SVG-bestanden animeren.Dit is een geweldige manier om het leven aan uw grafische weer te geven en kan ook dienen als alternatief voor het gebruik van Flash op uw website.

Best gebruikt op internet omdat SVG-bestanden responsief zijn

Dat betekent dat het bestand in grootte zal worden aangepast aan de schermgrootte, afhankelijk van of deze wordt bekeken vanuit een desktopcomputer, tab of mobiele telefoon.

Het best gebruikt voor complexe illustraties.

Dit omvat wanneer u bedrijfslogo's, grafieken of grafieken ontwerpt.

Het kan gemakkelijk worden geformatteerd

U kunt SVG-afbeeldingen eenvoudig formatteren met HTML, CSS en JavaScript.

Wat moet ik weten voordat ik SVG gebruik?

Wees selectief

Houd er rekening mee dat dit beeldformaat niet mag worden gebruikt om alle beeldformaten op uw website te vervangen.Bijvoorbeeld, voor afbeeldingen die diepe kleur vereisen, is het waarschijnlijk beter om bij JPEG-afbeeldingen te blijven.

Algemeen, maar niet volledig ondersteund

SVG-bestanden worden algemeen erkend in de meeste van de meest voorkomende browsers. Sommige oudere browsers, zoals oudere versies van Internet Explorer, ondersteunen deze afbeeldingsindeling mogelijk niet.

Weet wat mogelijke beveiligingsrisico's zijn

Omdat het mogelijk is om inhoud in dit bestandstype in te drukken, bijvoorbeeld met behulp van JavaScript, is er de mogelijkheid dat hackers SVG-bestanden met virussen infecteren.Als iemand de geïnfecteerde bestanden op hun computer opent, kan hun hele systeem geïnfecteerd raken.Dit kan leiden tot alle bestanden op uw computer zou kunnen worden gecodeerd en de hacker vereist dat u ze een losgeld betaalt voor hen om uw informatie te decoderen (Ransomware - zie het Facebook-incident hieronder).Bleeping Computer's Security News Editor, Catalin Cimpanu, legt dit meer in detail uit hier.

Deze zelfde tactiek kan worden gebruikt op de website van een bedrijf.SVG-bestanden kunnen worden geïnfecteerd en iedereen die de site bezoekt, kan ook hun computer geïnfecteerd hebben.Tegen de tijd dat een bedrijf het probleem realiseert, zal de situatie waarschijnlijk al uit de hand zijn gekomen.Dit kan de geloofwaardigheid van uw bedrijf ernstig beschadigen.

Het Facebook-incident

Vanwege de gevoeligheid van dergelijke afbeeldingen op sociale mediasites, gebruikten hackers Facebook Messenger om een campagne op sociale media uit te voeren om gebruikers te infecteren met Locky-ransomware.

Toen iemand een geïnfecteerd SVG-bestand op Messenger ontving en erop klikte, raakte zijn hele pc geïnfecteerd met Locky Ransomware. Het bestand bevatte Nemucod, een malware-downloader in de vorm van SVG-bestanden.

De hackers omvatten kwaadwillende JavaScript-code in de bestanden, die een externe link was. Wanneer geklikt, zou het u omleiden naar een website die eruit zag als YouTube. Nadat u bij de site bent, zou een pop-up u vragen om een bepaalde extensie op Google Chrome te installeren om de video te bekijken.

Nadat u de extensie had geïnstalleerd, zouden de hackers toegang krijgen tot uw Facebook-account en in het geheim al uw vrienden berichten met hetzelfde geïnfecteerde bestand. Zoals Meldde Steve Ragan, Facebook beweerde dat het probleem geassocieerd was met chromen extensies en die locky was niet het probleem ... maar anderen hebben blijkbaar locky geverifieerd, in feite, werd geleverd.

Hoe u risico's kunt verminderen

Wees alert en proactief.

Een van de beste manieren waarop bedrijven hun websites van infectie kunnen waarborgen, is om altijd grafische wijzigingen in de gaten te houden die op de website zijn gemaakt, ook regelmatig de code die wordt gebruikt op de site.

Zorg voor een geschikte antivirus

Het is misschien beter om vast te houden met het gebruik van SVG-afbeeldingen op uw site totdat u een antivirus hebt die sterk genoeg is om te detecteren wanneer er een probleem op uw site is.

Als u Social Media-sites gebruikt (hopelijk ben je!), Overweeg SVG-bestanden te blokkeren Als u geen bedieningselementen op zijn plaats hebt om uzelf te beschermen tegen geïnfecteerde bestanden.Probeer ook niet op SVG-bestanden te klikken die zijn verzonden door een van uw vrienden op sociale media.

Hoe maak ik SVG-afbeeldingen?

Om SVG-bestandsindeling te gebruiken, moet u een goed tekenprogramma hebben.Er zijn veel programma's die online kunnen worden gevonden of op uw computer worden geïnstalleerd.Als u de begroting en knowhow hebt, is een traditioneel go-to-to-Adobe Illustrator.U kunt ook inkscape gebruiken, wat een gratis open source-programma is om SVG-afbeeldingen te maken.Als geen van deze de juiste pasvorm voor u lijkt, heeft ColorLib een mooie lijst met programma's die u kunt gebruiken hier.

Gevolgtrekking

SVG-bestanden hebben veel voordelen die ontwerpers / ontwikkelaars ertoe aanzetten om ze te gebruiken. Maar u moet zich bewust zijn van de mogelijke risico's en deze kunnen voorkomen en detecteren als ze zich voordoen.

Ben je al begonnen met het gebruik van SVG-afbeeldingen? Heeft u nog andere tips om te delen met onze lezers met betrekking tot het gebruik ervan?

Wilt u een bericht zien met tips over het maken, gebruiken en bewerken van SVG-afbeeldingen?

Als u dit nuttig heeft gevonden, deel dan.

Geschreven door Hostwinds Team  /  juni- 26, 2017