SVG-iconen samenvoegen tot een sprite

Combineer SVG-iconen tot één sprite met symbolen en afzonderlijke, herbruikbare ID's.

Op je apparaat · Geen account

SVG-iconen samenvoegen tot een sprite verwerkt je invoer in deze browser. Invoer en resultaten worden niet opgenomen in de statistieken. Bij recent gebruikte tools worden toolnamen, aantallen bezoeken en tijdstippen van het laatste bezoek opgeslagen. Bij opgeslagen tools worden alleen de namen bewaard. Concepten opslaan is optioneel en gebeurt op dit apparaat; verwijder opgeslagen tekst met de knoppen voor het concept. Tekst laden via een URL is optioneel en maakt verbinding met die server; de server ziet de URL en je IP-adres. De optionele actie “Gebruiken in” bewaart gegevens voor overdracht in dit tabblad. De volgende tool verwijdert die gegevens bij het openen en negeert ze als er meer dan een minuut is verstreken.

‘Link kopiëren’ neemt de invoer die je wilt delen op in het webadres. Iedereen met die link kan de invoer opnieuw openen. Bestanden en gegenereerde resultaten worden niet opgenomen. Tools voor wachtwoorden en sleutels delen alleen instellingen.

Nederlands

SVG's gescheiden door een regel met ---

Je resultaat

Enter your values.

Meer

Sneltoetsen

Over links en resetten

Links bevatten je invoer en instellingen. Iedereen met de link kan die zien, dus laat privétekst weg. Bestanden en gegenereerde resultaten worden niet opgenomen; willekeurige trekkingen worden opnieuw uitgevoerd.

Resetten laadt de tool opnieuw met de beginwaarden, sluit geopende bestanden en geeft de bediening van apparaten vrij. Opgeslagen concepten blijven op dit apparaat staan totdat je ze verwijdert.

Zo maak je een sprite van SVG-iconen

Scheid je SVG-documenten met een regel met drie koppeltekens. Elk icoon wordt een symbool met de naam icon-1, icon-2 enzovoort. Interne ID's en lokale verwijzingen krijgen een voorvoegsel, zodat kleurverlopen en knippaden niet met elkaar botsen.

Volgende: Kleurenkiezer voor afbeeldingen

Voorbeeld

Twee ingevoerde SVG's worden symbolen met de namen icon-1 en icon-2. Gebruik een SVG-element use dat naar #icon-1 verwijst om het eerste icoon weer te geven.

Voordat je het resultaat gebruikt

Alleen zelfstandige SVG's met een viewBox of numerieke breedte en hoogte worden ondersteund. Actieve inhoud, stylesheets en externe bronnen worden geweigerd. Controleer de geëxporteerde sprite in de toepassing waarin je hem gaat gebruiken.

Volgende: Afbeeldingsformaat aanpassen

Bijgewerkt 7 oktober 2026

Deze pagina citeren

Referentiestijl

ToolOctopus. “SVG-iconen samenvoegen tot een sprite.” Bijgewerkt 7 oktober 2026. https://tooloctopus.com/nl/svg-iconen-samenvoegen-tot-een-sprite.

Voeg een raadpleegdatum toe als je instructies dat vereisen.

Bronvermeldingen worden opgemaakt met citeproc-js van Frank Bennett en stijlen uit Citation Style Language. Licentie en broncode.