SVG ikonná alakítása

Q: Miben különbözik ez az oldal az SVG ICO-ba átalakításától?

Az [SVG ICO-ba](/svg-to-ico) oldal az egyetlen .ico fájlra összpontosít, amely a favicon és a Windows számára kell. Ez az oldal az ikonok minden felhasználási helyét lefedi, a macOS ICNS-t és az Android, iOS és az alkalmazásáruházak által kért, rögzített méretű PNG-ket is beleértve.

Egyetlen vektoros logóból minden szükséges ikon elkészülhet: favicon, Windows-parancsikon, Mac-alkalmazás és a telefonok indítóikonjai. Ez az oldal többméretes ICO-val indul, de a többi platformhoz átválthat ICNS-re vagy PNG-re.

vagy húzza ide a(z) JPG, JPEG, JPE … fájlok fájlokat ·

Legfeljebb 95 MB fájlonként· Legfeljebb 20 fájl· Törlés 30 perc után

Kimenet

Konvertálás erre

A fájlokat szervereinken dolgozzuk fel, és 30 perc után töröljük.

Az eszköz használata

1
Töltsön fel egy négyzetes SVG-t
Adja hozzá a logója SVG-fájlját, lehetőleg négyzet alakú viewBoxszal. Egyszerre legfeljebb 20 fájlt tölthet fel, például egy világos és egy sötét változatot.
2
Válassza ki az ikonformátumot
Alapértelmezés szerint az ICO van kiválasztva, az Ikonméretek beállítása pedig Minden méret (16–256). macOS-hez válassza az ICNS-t a Konvertálás erre mezőben, telefonos vagy áruházi ikonhoz pedig a PNG-t, a szélességet a Kimeneti kép átméretezése résznél megadva.
3
Alakítsa át, és helyezze el a fájlokat
Kattintson az Átalakítás: ICO → gombra (a felirat a választott formátumot követi), töltse le a fájlokat, és tegye mindegyiket oda, ahol az adott platform keresi.

Nincs egyetlen ikonformátum. A Windows és a böngészők ICO-t, a macOS ICNS-t, a telefonok PNG-készleteket használnak. Ha SVG-ből indul, mindegyik a vektorból készül újra, minden méretben élesen.

SVG ikonná alakítása: egy vektor, háromféle ikonfájl

Az ikonfájl kis bitképeket tartalmazó tároló, nem vektor. Az operációs rendszer a szükséges mérethez legközelebbi bitképet választja, ezért egy jó ikon többet is tartalmaz, mindegyiket a saját rácsára renderelve.

Az ezen az oldalon alapértelmezett ICO egyetlen fájlba írja a 16 és 256 px közötti összes méretet, ami a favicon.ico-hoz és a Windows-parancsikonokhoz elég. A Konvertálás erre mezőben válassza az ICNS-t az Apple ikontárolóhoz, vagy a PNG-t az Android, iOS és az áruházak által kért önálló méretekhez.

A táblázat azt mutatja, mit írnak elő a nagyobb platformok az ikonhelyekhez.

Az egyes platformok által elvárt ikonfájlok
Szervezet	Követelmény	Forrás
Windows asztal és tálca	ICO több mérettel, köztük 16, 32, 48 és 256 px	—
Weboldal favicon	favicon.ico a webhely gyökerében 16, 32 és 48 px mérettel; 180 × 180 px PNG az apple-touch-icon-hoz	—
macOS alkalmazásikon	ICNS vagy Xcode eszközkatalógus, legfeljebb 1024 × 1024 px méretekkel	—
Google Play áruházi adatlap	512 × 512 px, 32 bites PNG, legfeljebb 1024 KB	—
Apple App Store	1024 × 1024 px PNG átlátszóság nélkül	—

SVG

Scalable Vector Graphics

Az SVG XML-alapú vektorformátum, amelyet a W3C 2001-ben szabványosított. Pixelek helyett alakzatokat, útvonalakat és szöveget ír le, ezért bármilyen méretben éles marad, logókhoz és ikonokhoz pedig általában apró. Támogatja az átlátszóságot, a CSS-stílusozást, a szkriptelést és az animációt, és minden böngésző natívan megjeleníti. Az SVG fényképekhez nem alkalmas, az összetett illusztrációk megjelenítése pedig lassúvá válhat. Az Illustrator, az Inkscape, a Figma és a böngészők meg tudják nyitni és szerkeszteni.

Tömörítés: –
Átlátszóság: Igen
Animáció: Igen
Bevezetés éve: 2001 · W3C

SVG átalakító

ICO

Windows-ikon

Az ICO a Microsoft ikonformátuma, amelyet a Windows programikonjaihoz és a weboldalak favicon-jaihoz használnak. Egyetlen .ico fájl több méretű képet is tartalmazhat, például 16×16, 32×32, 48×48 és 256×256 pixelest, így a rendszer a legjobban illőt választhatja. Minden kép tárolható bittérképként vagy PNG-adatként, és teljes alfa-átlátszóságot támogat. Az ICO nem fotókhoz vagy nagy grafikákhoz való. A böngészők, a Windows és a legtöbb ikonszerkesztő olvassa.

Tömörítés: Veszteségmentes
Átlátszóság: Igen
Animáció: Nem
Bevezetés éve: Microsoft

ICO átalakító

Az SVG ikonná alakítását akkor keresik, ha egyetlen vektoros logóval több platformot kell kiszolgálni, mindegyiknek saját ikontárolóval, a weboldal favicon.ico fájljától a Mac ICNS-ig és az alkalmazásáruházak méretezett PNG-ig.

SVG átalakítása ikonfájlokká Windowshoz, Machez, Androidhoz és iOS-hez

Hagyja az ICO-t, az Ikonméretek értéke pedig maradjon Minden méret. Nevezze át az eredményt favicon.ico-ra a weboldal gyökerébe, vagy a Windows-parancsikon Ikon módosítása párbeszédablakában tallózzon rá.

Egyetlen .ico kiszolgálja a füleket, a könyvjelzőket és a tálcát
Adjon hozzá egy 180 px-es PNG-t az iPhone kezdőképernyős könyvjelzőihez

Olyan SVG tervezése, amely 16 px-en is felismerhető marad

Egy 16 × 16 px-es ikon összesen 256 pixelből áll. A legtöbb márka külön ikonjelet használ, gyakran csak a szimbólumot vagy egy betűt, merész formákkal és kevés színnel; ha a öné még nincs meg, készítsen az SVG-ről egyszerűsített másolatot ikonokhoz.

Az átalakítás előtt ellenőrizze a viewBoxot. Széles viewBox esetén az ikon a jel alatt és felett üres sávokat kap, ezért előbb vágja négyzetre; a kép képarányra vágásáról szóló útmutató a négyzetes vágást is bemutatja, az SVG PNG-be pedig gyors, nagy előnézetet ad a terv megítéléséhez.

GYIK: SVG ikonná alakítása

Miben különbözik ez az oldal az SVG ICO-ba átalakításától?

Az SVG ICO-ba oldal az egyetlen .ico fájlra összpontosít, amely a favicon és a Windows számára kell. Ez az oldal az ikonok minden felhasználási helyét lefedi, a macOS ICNS-t és az Android, iOS és az alkalmazásáruházak által kért, rögzített méretű PNG-ket is beleértve.

Melyik operációs rendszer milyen ikonformátumot használ?

A Windows ICO-t olvas, a macOS ICNS-t vagy Xcode-ban készített eszközkatalógust, az Android és az iOS pedig rögzített pixelméretű PNG képeket vár.

Megkaphatom egyetlen átalakítással az alkalmazásom összes PNG-méretét?

Nem. A PNG egyetlen méretet tartalmaz, ezért minden átalakítás egy szélességet ír ki. Állítsa a Kimeneti kép átméretezése értékét egy méretre, alakítsa át, majd módosítsa a számot, és alakítsa át újra; minden méret élesen, a vektorból készül.

Az itt készült ICNS lefedi a Retina Mac-ikonokat is?

16 és 256 px közötti méreteket tartalmaz. A mai macOS-alkalmazásikonok 512 px-es és 1024 px-es elemeket is tartalmaznak a Retina kijelzőkhöz, amelyeket az Xcode vagy az Apple iconutil eszköze állít össze PNG-kből; ezt a két méretet exportálja itt PNG-ként, és adja hozzá a készlethez.

Átlátszó maradjon az ikon háttere?

ICO, ICNS és Android launcher rétegek esetén igen: az átlátszóság lehetővé teszi, hogy a rendszer saját hátteret rajzoljon. Az iOS App Store ikon kivétel; az Apple elutasítja az alfacsatornás 1024 px-es marketingikont, ezért ennek a PNG-nek adjon tömör hátteret az SVG-ben.

Miért lesz a részletes logóm egy paca kis ikonként?

16 vagy 32 px-en nincs hely vékony vonalaknak vagy kis szövegnek. Vastagítsa a vonalakat úgy, hogy a legkisebb méretben is legalább egy teljes pixelt lefedjenek, és hagyja el a szövegmárkajelet.