SVG-symboolsprite
SVG-pictogrammen samenvoegen in één symboolsprite
Combineer een map met SVG-pictogrammen in één herbruikbare sprite. Elk bestand wordt een <symbol> met een kant-en-klaar <use>-fragment, terwijl interne ID's ervoor zorgen dat verlopen, maskers en clippaden niet met elkaar in botsing komen.
Deze instellingen gelden voor de hele sprite.
Spritevoorbeeld
Voeg SVG-bestanden toe om een sprite te bouwen.
Nog geen bestanden. Sleep bestanden hierboven of klik op BESTANDEN SELECTEREN.
Symboolsprite of spritesheet?
Een symboolsprite is één SVG-bestand met per pictogram een <symbol>. Er wordt niets getekend tot je met <use> naar een symbool verwijst, dus de pictogrammen blijven vectoren, blijven vanuit CSS te stylen en blijven scherp op elke maat. Dit is wat je wilt voor een pictogramset in een gebruikersinterface.
Een spritesheet is één afbeelding met alle pictogrammen op een raster, getekend met background-position of met een JSON-frametabel. De pictogrammen zijn pixels op vaste coördinaten, precies wat game-engines en canvasrenderers verwachten, en wat je nodig hebt wanneer het doel <use> helemaal niet kan gebruiken.
Open de SVG-spritesheetgeneratorWanneer je een symboolsprite gebruikt
Een symboolsprite bewaart een pictogramset in één herbruikbaar SVG-bestand, en elke pictograminstantie wordt een kort <use>-element in plaats van een herhaald blok met paden. Dit is handig voor navigatie, knoppen, tabellen en andere interfaces die dezelfde pictogrammen gebruiken. De symbolen blijven vectormarkeringen, zodat ze scherp blijven en de kleur en grootte kunnen overnemen van CSS.
Een SVG-symboolsprite online bouwen
- 1
Sleep je SVG-pictogrammen erin, of klik op BESTANDEN SELECTEREN, om ze aan de wachtrij toe te voegen. Tot 40 tegelijk, en de volgorde in de lijst is de volgorde van de symbolen.
- 2
Kies een externe of een inline sprite, bepaal of de pictogrammen geoptimaliseerd worden en of hun viewBox genormaliseerd wordt, en zie het pictogramraster zich opnieuw opbouwen uit de sprite zelf.
- 3
Klik op ALLES OPSLAAN om sprite.svg te downloaden, of een ZIP met sprite.svg en usage.html wanneer de gebruiksvoorbeelden aanstaan.
Privacy: je bestanden verlaten je browser niet
De conversie wordt lokaal in uw browser uitgevoerd met behulp van JavaScript en WebAssembly. Er vindt geen bestandsupload of serverconversie plaats, dus de bestanden die u toevoegt, blijven op uw apparaat staan.
Lokale verwerking helpt vertrouwelijke logo's, interne documenten en niet-vrijgegeven illustraties van klanten te beschermen. Pagina's en conversiecode worden in de cache opgeslagen terwijl u ze gebruikt, zodat tools die u al hebt geopend, kunnen blijven werken zonder een netwerkverbinding.
Veelgestelde vragen
Wat gebeurt er als twee bestanden dezelfde id opleveren?
De id's komen uit de bestandsnaam zonder extensie, in kleine letters en omgezet naar een slug, dus "Arrow Left.svg" wordt arrow-left. Leveren twee bestanden dezelfde id op, dan houdt het eerste hem en krijgen de volgende -2, -3, enzovoort. Een bestand in de lijst hernoemen verandert de id meteen, en dat geldt ook voor sorteren of slepen, want het eerste bestand in de volgorde is het bestand dat de kale id houdt.
Moet ik een externe of een inline sprite gebruiken?
Een externe sprite is een bestand sprite.svg waarnaar je verwijst met <use href="sprite.svg#icon-id">. Het wordt net als elk ander statisch bestand in de cache gezet en houdt je HTML klein, ten koste van één extra verzoek, en het moet van dezelfde origin komen tenzij CORS iets anders toestaat. Een inline sprite is dezelfde markup, geplakt in de pagina binnen een verborgen <svg> en aangesproken met <use href="#icon-id">. Die heeft geen verzoek nodig en werkt altijd, maar die bytes staan opnieuw in elk HTML-document dat hem gebruikt.
Verandert het bouwen van een sprite hoe mijn pictogrammen eruitzien?
Nee. Het <svg>-hoofdelement van elk bestand wordt een <symbol> met dezelfde viewBox, en de onderliggende elementen gaan ongewijzigd mee, op het voorvoegsel voor de id's na. "SVG optimaliseren" voert dezelfde veilige bewerkingen uit als de SVG-optimizer, dus commentaar, editorgegevens en overbodige attributen verdwijnen terwijl de geometrie blijft. "viewBox normaliseren" centreert elk pictogram opnieuw in een vierkant coördinatenvak, wat het vak verandert en niet de tekening. <script>-elementen en on*-attributen worden altijd verwijderd, want een sprite komt inline in je pagina terecht.