SVG-spritesheet
Genereer een SVG-spritesheet met een JSON-kaart
Rangschik SVG-pictogrammen op een aangepast raster en exporteer één PNG-, WebP- of SVG-spritesheet met een JSON-framekaart. Beheer de kolommen, celgrootte, opvulling, spatiëring, uitlijning, schaal en sorteervolgorde.
Voorbeeld
Geen voorbeeld. Voeg bestanden toe en selecteer ze om resultaten te zien.
Nog geen bestanden. Sleep bestanden hierboven of klik op BESTANDEN SELECTEREN.
Wat is een SVG-spritesheet?
Een spritesheet is één afbeelding met veel kleinere afbeeldingen op een raster, plus een tabel die zegt waar elk ervan staat. Hier zijn de bronnen SVG-bestanden: elk bestand wordt in zijn eigen cel getekend en de voltooide sheet wordt geëxporteerd als PNG, WebP of als één SVG-canvas.
Het is niet hetzelfde als een SVG-symboolsprite. Een symboolsprite is één SVG-bestand met een <symbol> per pictogram waarnaar pagina's verwijzen op ID met <use>, dus elk pictogram blijft vectoropmaak en CSS kan het nog steeds inkleuren. Een spritesheet is een visueel canvas: wat het ook gebruikt, het snijdt frames op basis van coördinaten. Kies de symboolsprite voor HTML-pictogrammen, het spritesheet voor canvas, WebGL of CSS-achtergrondsprites.
Wanneer je een spritesheet gebruikt
Een spritesheet vouwt veel kleine afbeeldingen samen tot één bestand, zodat een game of een app één verzoek doet en elk frame in één texture houdt. Canvas- en WebGL-renderers tekenen er per rechthoek uit, CSS positioneert hem met background-position, en de JSON-frametabel levert de coördinaten, zodat er niets met de hand hoeft te worden opgemeten. Grijp ernaar zodra de afnemer in pixels werkt; wil je pictogrammen die schalen en binnen HTML hun kleur erven, bouw dan een SVG-symboolsprite.
Een spritesheet bouwen uit SVG-bestanden
- 1
Sleep je SVG-bestanden erin, of klik op BESTANDEN SELECTEREN, om ze aan de wachtrij toe te voegen. Tot 40 tegelijk.
- 2
Stel het raster in (kolommen, rijen, celgrootte, padding, tussenruimte) en daarna de uitlijning, schaal, sortering en het uitvoerformaat. De sheet wordt opnieuw getekend zodra je iets wijzigt.
- 3
Klik op ALLES OPSLAAN om één ZIP te downloaden met de sheet en zijn JSON-frametabel.
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
Moet ik een spritesheet of een SVG-symboolsprite gebruiken?
Gebruik een symboolsprite wanneer de pictogrammen in HTML terechtkomen: hij blijft vector, erft de CSS-eigenschap color, en elk pictogram wordt via de id aangesproken met <use>. Gebruik een spritesheet wanneer iets pixels tekent op basis van coördinaten, zoals een canvas- of WebGL-game of een CSS-achtergrondsprite. De JSON-frametabel van de spritesheet geeft je de x, y, width en height van elk frame.
Wat staat er in de JSON-frametabel?
Eén item per pictogram, met de bestandsnaam zonder extensie als sleutel, bijvoorbeeld {"home":{"x":0,"y":0,"width":64,"height":64}}. De rechthoek beslaat de hele cel, padding inbegrepen, dus wie die rechthoek tekent, krijgt het pictogram precies terug zoals het geplaatst is. Dubbele namen krijgen de achtervoegsels -2 en -3, zodat elke sleutel uniek blijft.
Hoe groot mag de sheet worden?
Het canvas is begrensd op 16.384 px per zijde en 64 megapixels in totaal, dus 40 pictogrammen in cellen van 256 px blijven ruim binnen de limiet. Daarboven meldt de tool de afmetingen in plaats van een leeg beeld weg te schrijven. WebP hangt daarnaast van de browser af: waar die WebP niet kan coderen, krijg je een foutmelding in plaats van een PNG met de verkeerde extensie.