SVG / Ikone

Generator SVG sprite-a: simboli i upotreba ikonica

Prevucite više SVG ikonica da biste napravili sprite sa simbolima. Očistite kod, uklonite duplikate ID-jeva iz naziva fajlova, sačuvajte viewBox vrednosti, po želji pretvorite fill u currentColor i preuzmite sprite.svg.

Generator SVG sprite-a: simboli i upotreba ikonica: Dodajte skup SVG ikonica i dobićete jednu sprite datoteku sa po jednim simbolom za svaku ikonicu, kao i isečak koda za upotrebu svake od njih. Skripte, spoljašnji resursi i sve što nije bezbedno uklanjaju se, dimenzije se po potrebi pretvaraju u viewBox, a fill vrednosti mogu da se prebace na currentColor kako bi ikonice pratile boju teksta. Radi 100% lokalno u vašem pregledaču, bez otpremanja datoteka na server.

Kategorija
Alatke za programere
Pokretanja
U vašem pregledaču
Trošak
Besplatno · bez registracije
Dostupnost
Spremno za upotrebu
Sprite SVG ikonicaLokalna obrada

U potpunosti radi u vašem pregledaču

Najviše 60 ikonica · po 1 MB · izbor datoteka zamenjuje trenutni skup

Skripte, rukovaoci događajima, spoljni resursi, ugrađene slike, tekst i nepodržani elementi se uklanjaju. Osnovni umetnuti stilovi postaju atributi prezentacije. Ako viewBox nedostaje, koriste se numeričke vrednosti širine i visine, uz 24 jedinice kao rezervnu vrednost za svaku dimenziju koja nedostaje. Proverite svaki pregled pre upotrebe.

Uredi SVG ikonicu

Simboli i ponovna upotreba

SVG 2 definiše elemente symbol i use i njihovo ponašanje viewBox-a: https://www.w3.org/TR/SVG2/struct.html#SymbolElement ; https://www.w3.org/TR/SVG2/struct.html#UseElement

Lokalna obrada i iscrtavanje

Svaka ikona ponovo se pravi iz liste bezbednih SVG elemenata i atributa, tako da skripte, rukovaoci događajima i spoljašnji resursi ne mogu da dopru do sprite-a. Nije uključen nijedan skup ikona treće strane. SVG iscrtavanje i currentColor definisani su na adresi https://www.w3.org/TR/SVG2/painting.html . Za licence otpremljenih ikona odgovoran je korisnik.

Kako se koristi

  1. Prevucite do 60 SVG ikonica, svaku veličine manje od 1 MB.
  2. Pregledajte očišćene prikaze i po želji pretvorite fill u currentColor.
  3. Preuzmite sprite i izaberite ikonicu da biste kopirali njen isečak za upotrebu.

Privatnost i ograničenja

Vaše SVG datoteke ostaju lokalno. Alat ne preuzima ugrađene URL-ove niti otprema ikonice.

Srodne alatke

SVG uređivačČistač SVG-aSVG u JSXAlat za sprite sheetove

Često postavljana pitanja

Kako da koristim sprite?

Umetnite njegov SVG jednom u skriveni kontejner na stranici, a zatim koristite kopirane inline isečke. Za zasebnu datoteku umesto toga koristite sprite.svg#id kao href vrednost.

Šta se dešava kada nedostaje viewBox?

Numeričke vrednosti width i height, uključujući jedinice px, definišu novi viewBox. Dimenzija koja nedostaje ili nije podržana podrazumevano dobija vrednost od 24 jedinice. Pregled označava popravljene viewBox vrednosti kako biste mogli da proverite da li je nešto isečeno.

Da li će svaka ikonica zadržati potpuno isti izgled?

Ne. Osnovni oblici, grupe, gradijenti, clipping i maske se zadržavaju, ali skripte, tekst, ugrađene slike, use elementi i nepodržani stilovi se uklanjaju. Proverite pregled. Vi ste i dalje odgovorni za licence umetničkih dela koja otpremate.

Besplatan alat · pokretanja: u vašem pregledaču · nalog nije potreban