Help Center > Editor V4 > Elements > SVG-element

SVG-element

Laatste update: september 3, 2025

Deze post is vertaald met behulp van automatische vertaling, waardoor er kleine onnauwkeurigheden of verschillen in formulering ten opzichte van het origineel kunnen zijn. Sorry voor eventuele foutjes of onduidelijkheden, neem gerust contact met ons op als wij iets voor je mogen verhelderen.

Het element toevoegen en verwijderen

Om een element te openen en te gebruiken:

  1. Klik op + in de Elementor Editor.
    Alle beschikbare elementen worden weergegeven.

  2. Klik of sleep het element naar het canvas. Voor meer informatie, zie Elementen aan een pagina toevoegen.

Om het element te verwijderen:

  1. Selecteer het element op het canvas door erop te klikken.
  2. Druk op de delete-toets op je toetsenbord. Voor meer informatie, zie Elementen van een pagina verwijderen.

Wat is het SVG-element?

SVG (Scalable Vector Graphics) is een XML-gebaseerd beeldformaat dat wordt gebruikt voor het maken van tweedimensionale vectorafbeeldingen. SVG-afbeeldingen kunnen worden geschaald zonder kwaliteitsverlies, waardoor het ideaal is voor websiteafbeeldingen, pictogrammen en illustraties.

De SVG-widget stelt je in staat om SVG-afbeeldingen in je webpagina op te nemen als een afzonderlijk element.

Bekijk alle beschikbare opties van het SVG-element.

Veelvoorkomend gebruiksscenario

Hunter maakt een call-to-action sectie en wil SVG-illustraties gebruiken als pictogrammen.

Aanvullende gebruikssituaties

  • Infographics.
  • Eenvoudige lichtgewicht afbeeldingen waardoor je pagina sneller laadt.

Een SVG-element toevoegen: stap voor stap

  1. Maak op het canvas een grid-container met één rij en drie kolommen. Voor details, zie Een Grid-container maken.

    Je kunt de elementen aan het grid toevoegen.

  2. Voeg een SVG-widget toe aan de meest linkse kolom. Voor details, zie Elementen toevoegen aan een pagina.

  3. Klik in het paneel op het afbeeldingsveld.

  4. Voeg een SVG-afbeelding toe aan de widget. Voor details, zie Afbeeldingen en pictogrammen toevoegen.
  5. Herhaal dit voor elk van de widgets.

    Laten we de pictogrammen klikbaar maken voor gebruiksgemak.

  6. Klik op het enveloppictogram.

  7. Klik in het paneel op het plusteken naastLink.

  8. Voer de mailto-link in het tekstvak in.

  9. (Optioneel) ZetOpenen in nieuw tabbladaan als je wilt dat de link in een nieuw tabblad opent.

    De call-to-action sectie is klaar.

Instellingen voor het SVG-element

Je kunt je elementen aanpassen met inhoud en stijl, wat je veel flexibiliteit biedt om ze aan te passen aan je behoeften. Klik op de tabbladen hieronder om alle beschikbare instellingen voor dit element te zien.

Algemeen tabblad

Klik om een SVG-bestand toe te voegen. Voor details, zie Afbeeldingen en pictogrammen toevoegen.

Klik op het plusteken om een link in te voeren. Bezoekers die op het SVG-bestand klikken, openen de link.

Hiermee kun je individuele elementen op een pagina taggen. Op deze manier kun je naar dit specifieke element linken.

Stijl tab

Zie de individuele artikelen over Stijlopties:

Note
De SVG-widget stelt je in staat om kleur toe te voegen aan je SVG-bestanden. Het bestand moet echter correct geformatteerd zijn. De vulkleur moet ingesteld zijn op zuiver zwart (#000000) en geëxporteerd worden zonder vuleigenschap. Je kunt dan je eigen vulkleur toevoegen met het kleurveld van de Typografiesectie in hetStijltabblad.

Op deze pagina

Deel dit artikel

Hosted with