Waarom SVG-afbeeldingen voor websites maken?

Hoewel dit oorspronkelijk een SVG-afbeelding was, ondersteunt onze contentmanager het formaat niet, dus werd het geconverteerd naar PNG

In onze artículoenvio anterieure We hebben gezien hoe je gratis software kunt gebruiken om afbeeldingen in WebP-formaat op te nemen. Nu zullen we zien waarom u SVG-afbeeldingen voor websites maakt.

Een van de grote uitdagingen waarmee webontwerpers worden geconfronteerd, is het aantal apparaten waarmee mensen verbinding maken met het netwerk. In die gevallen waarin het beeld louter illustratief is, heeft kwaliteitsverlies niet veel invloed. Maar als het belangrijk is voor de inhoud, zoals een infographic, wireframe of screenshot, moet u ervoor zorgen dat de inhoud er op elk formaat precies hetzelfde uitziet.

Maak SVG-afbeeldingen voor websites

Wat zijn afbeeldingen in SVG-indeling

Om het verschil te begrijpen tussen dit soort afbeeldingen en de afbeeldingen die vaak op websites worden gebruikt, moeten we twee concepten uitleggen; die van rasterafbeeldingen en die van vectorafbeeldingen.

  • Rasterafbeeldingen: Dit type afbeelding is opgebouwd met pixels die in een raster zijn gerangschikt. Elke pixel krijgt een specifieke kleur toegewezen. De kwaliteit is gebaseerd op de resolutie die wordt bepaald door het aantal pixels per inch. Naarmate de grootte groter wordt, neemt de pixeldichtheid af, wat de kwaliteit van de afbeelding beïnvloedt. Dit betekent dat voor het weergeven van complexe afbeeldingen met veel details, zoals een foto, zeer grote bestanden van een bepaald formaat nodig zijn.
  • Vectorafbeeldingen: Ze zijn opgebouwd uit geometrische objecten, uitgedrukt in wiskundige formules. Deze objecten kunnen lijnen, vormen en curven zijn. Omdat ze worden uitgedrukt in wiskundige formules, kan hun grootte worden gewijzigd zonder verlies van kwaliteit en scherpte, waardoor de details nauwkeurig worden weergegeven.

Rasterafbeeldingen zijn het meest geschikt voor zeer complexe afbeeldingen, zoals foto's of die zachte kleurschakeringen en kleurverlopen bevatten. Om ze te bewerken hebben ze gespecialiseerde software voor fotobewerking nodig, zoals Gimp.

Van haar kant, Vectorafbeeldingen zijn het beste voor illustraties, pictogrammen en logo's. Hoewel er bewerkingsprogramma's bestaan ​​zoals Inkscape, kunnen deze ook worden gemaakt en bewerkt door tekst te schrijven.

Afbeeldingen in SVG-formaat (schaalbare vectorafbeeldingen) Ze worden voornamelijk gebruikt op websites en ze hebben deze kenmerken:

  • Zij worden niet beïnvloed door de resolutie:  Afbeeldingen in SVG-indeling zien er op elk schermformaat even scherp uit, ook op schermen die gebruik maken van technologie met een zeer hoge resolutie.
  • Het zijn vectorafbeeldingen: Zoals we al hebben uitgelegd, is dit type grafische weergave gebaseerd op de weergave van geometrische objecten, opgebouwd uit wiskundige formules. Als u de grootte wijzigt, wordt de formule eenvoudigweg op de nieuwe waarden toegepast.
  • kleinere maat: Het SVG-formaat hoeft geen informatie voor elke pixel op te slaan. De wiskundige formules om ze te construeren worden opgeslagen in een tekstbestand in gecomprimeerd XML-formaat.
  • Editie: Zoals alle vectorafbeeldingen kan het SVG-formaat worden gewijzigd met specifieke software of een teksteditor.
  • Interactiviteit: Dit soort afbeeldingen kunnen worden geanimeerd of gemaakt om te reageren op gebruikersinstructies met behulp van CSS- of Javascript-code.
  • verenigbaarheid: De meeste apparaten hebben browsers die dit grafische formaat ondersteunen.

We hebben gezegd dat een SVG-afbeelding kan worden gemaakt met behulp van een teksteditor. Open de teksteditor van uw distributie en plak de volgende code:

<svg width="200" height="200">
<rect width="100%" height="100%" fill="white" />
<circle cx="50%" cy="50%" r="50" fill="green" />
<text x="50%" y="50%" text-anchor="middle" fill="white">Ubunlog</text>
</svg>

Sla het nu op met de naam Circle.svg. Als u in uw bestandsbeheerder kijkt, ziet u de miniatuur van de groene cirkel en als u deze opent met een afbeeldingsviewer, ziet u deze op volledige grootte.

Waar:

<svg width="200" height="200">

Stel de breedte en hoogte in op 200 pixels.

<rect width="100%" height="100%" fill="white" />

Bepaalt dat de achtergrond een wit vierkant is dat de gehele breedte en hoogte van de afbeelding beslaat.
<circle cx="50%" cy="50%" r="50" fill="green" />

Plaats de cirkel in het midden van de afbeelding, wijs er een straal van 50 pixels aan toe en geef aan dat de kleur groen zal zijn.

<text x="50%" y="50%" text-anchor="middle" fill="white">Ubunlog</text>

Plaats het woord Ubunlog precies in het midden van de cirkel.

In een toekomstig artikel zullen we de grafische editors voor dit formaat zien.


Laat je reactie achter

Uw e-mailadres wordt niet gepubliceerd. Verplichte velden zijn gemarkeerd met *

*

*

  1. Verantwoordelijk voor de gegevens: Miguel Ángel Gatón
  2. Doel van de gegevens: Controle SPAM, commentaarbeheer.
  3. Legitimatie: uw toestemming
  4. Mededeling van de gegevens: De gegevens worden niet aan derden meegedeeld, behalve op grond van wettelijke verplichting.
  5. Gegevensopslag: database gehost door Occentus Networks (EU)
  6. Rechten: u kunt uw gegevens op elk moment beperken, herstellen en verwijderen.