Hogyan készítsünk SVG-ket méretezhető, kereshető típussal

Az SVG-típus ugyanazokat az értékes szolgáltatásokat nyújtja, mint az Adobe Illustrator CC-ben létrehozott SVG-grafikák minden aspektusában : skálázhatóság, szerkeszthetőség az Illustratorban és natív támogatás minden böngészőben. Ezek a funkciók önmagukban amellett érvelnek, hogy a szöveget tartalmazó grafikus tartalmat SVG formátumban exportálják, ha azt digitális fejlesztésre célozzák.

Még azokon az előnyökön túl is, amelyek az SVG grafikákhoz való általános használatából származnak, néhány speciális funkció elérhető, ha beírja ezeket a grafikákat.

Használja ki a méretezhető, kereshető típus értékét

Amint azt már észrevetted, izgatott vagyok, hogy az SVG típus böngészőablakban megnyitva kereshető a böngészővel. Általában ezek a böngésző keresőeszközök csak HTML típussal működnek.

És az SVG típus nem csak kereshető; a felhasználók szöveget találhatnak az oldalon, másolhatnak és beilleszthetnek, és tartalmat kereshetnek. Például, ha egy gyümölcslé-bár látogatóját érdekli, hogy a kelkáposzta turmixban van-e citromlé, akkor az SVG-fájlban kereshet a szövegre, amint az itt látható.

Szöveg keresése SVG-grafikában a Chrome-ban.

Vagy ami azt illeti, ha a felhasználó nem biztos abban, hogy mi az a fene kelkáposzta, kiválaszthatja a szöveget, és kereshet egy definíciót, ahogy az ábra mutatja.

Típus kiválasztása egy SVG-grafikában a böngészőben

Ha tárcsázni vissza egy kicsit, akkor lehet exportálni Illustrator grafikák, amelyek tartalmazzák típusú képernyők, PNG, GIF, vagy JPEG. De nem lesznek méretezhetőek, és nem tartják meg az előző két ábrán bemutatott típusú funkcionalitást.

Optimalizálja a típusfunkciókat az SVG-k mentésével

Hamarosan visszatérek arra, hogy mikor és hogyan kell SVG-fájlokat menteni és SVG-be exportálni. De ha már az SVG típus témájánál tartunk, tudnod kell, hogy ahhoz, hogy az SVG típus a bemutatott módon viselkedjen, el kell mentened a grafikát SVG-ként. És speciális beállításokat kell használnia, hogy a típus úgy működjön, ahogy kellene, amikor az SVG-képet böngészőben tekintik meg.

A képen belüli típus SVG-típusként való mentéséhez kövesse az alábbi lépéseket:

1. Amikor a grafikája készen áll, hogy átadja a webfejlesztőnek, válassza a Fájl→Mentés másként menüpontot. Keresse meg a mappát, ahová menteni szeretné a fájlt, és írja be a fájlnevet.

Legyen a fájlnevek webkompatibilis, ami azt jelenti, hogy használjon kisbetűket és számokat, ne használjon speciális karaktereket (kivéve a kötőjelet és az aláhúzást), és semmiképpen ne használjon szóközt.

Ha egy már mentett fájlt más formátumba ment, megtarthatja fájlnevét és helyét, és továbbléphet a 2. lépésre.

2. A Mentés párbeszédpanel formátum legördülő menüjében válassza az SVG lehetőséget, majd kattintson a Mentés gombra.

Megnyílik az SVG-beállítások párbeszédpanel.

3. Hagyja az SVG-profilokat az SVG 1.1-re állítva (a jelenlegi verzió, amelyet minden böngésző támogatja.

A többi lehetőség nem kritikus az itt végzett tevékenység szempontjából, de röviden a következők:

• • Alkészlet beállítása: Hagyja az Alkészlet beállítást Nincs értékre. A többi beállítás nem használható webes SVG-típus esetén.
  • Kép helyének beállításai: Ezek a beállítások csak akkor használhatók, ha az Illustrator-fájlba beágyazott vagy hivatkozott (vagy mindkettő) grafikát tartalmaz.
  • A CSS Properties beállításai: A fejezet későbbi részében ismertetem a CSS Properties opciókat, de a rövid magyarázat az, hogy azokat annak a fejlesztőnek az igényei határozzák meg, akinek átadja a fájlokat. Amikor SVG-ként menti a típust, használhatja a CSS-tulajdonságok bármelyik beállítását.

4. A Speciális beállítások párbeszédpanel alsó részében törölje a Kevesebb elem kiadása és az Elem használata a szöveghez az útvonalon jelölőnégyzetet .

Vegye figyelembe, hogy ezek a beállítások alapértelmezés szerint ki vannak választva . Az SVG-beállítások párbeszédpanel ezen részének a következő ábra szerint kell kinéznie.

SVG-grafika mentése a speciális típusjellemzők megőrzése érdekében.

Ezen opciók kijelölésének törlése kissé növelheti a fájlméretet, de a kijelölésük törlésével megőrzi a szöveg megjelenését és azokat a tulajdonságokat, amelyekkel ebben a részben dicsekedtem (kereshetőség, másolás és beillesztés, keresés a böngészőben és egyéb szolgáltatások, a böngészési környezettől függően).

A Reszponzív jelölőnégyzet alapértelmezés szerint be van jelölve. Ez a beállítás nem kritikus az SVG típusú speciális attribútumok megőrzéséhez. A legtöbb lehetőséghez hasonlóan itt is a webfejlesztő igényeitől függ a választás. Ha kétségei vannak, a Reszponzív beállítás kiválasztása széles körben alkalmazható kimeneti lehetőség.

5. Kattintson az OK gombra az SVG-beállítások párbeszédpanelen a fájl beágyazható SVG-ként való mentéséhez.

Néhány megjegyzés az SVG típushoz:

• Jelen pillanatban az SVG típusú összes funkció támogatása folyamatban van. Az itt bemutatott alapvető funkciók minden böngészőben működnek, de a különböző betűtípusok támogatásához szükség lehet a kód módosítására a webfejlesztő partnertől.
• Érdekelne, hogy az SVG-szöveg nagyszerű kijelölési, szerkesztési és keresési funkciói alkalmazhatók-e a görbén lévő szövegekre? A választ a következő ábra mutatja. Spoiler: Igen!

Szöveg kijelölése egy elérési úton egy SVG-fájlban a Safari böngészőben

Adjon hozzá kódrészleteket az SVG grafikához

Az Illustrator soha nem lesz a legjobban értékelt kódszerkesztő, de tartalmaz egy remek kis funkciót, amellyel kódot társíthat egy SVG-fájl elemeihez. Vessünk egy rövid pillantást arra, hogyan adjunk hozzá kódrészletet, ha hivatkozást szeretnénk hozzáadni egy SVG-grafika egy részéhez. Az alábbi lépések a JavaScript objektumhoz való hozzárendelését mutatják be, amely az objektumot hivatkozásként fogja használni.

1. Egy objektum kiválasztása után tekintse meg az SVG interaktivitás panelt.

Ha nem aktív, ezt a panelt megjelenítheti az Ablak→SVG interaktivitás menüpontban.

2. Hagyja az Eseményt az alapértelmezett Onclick értékre állítva.

Ez a JavaScript-parancs egy funkciót hajt végre (megtörtént valamit), amikor a felhasználó a kiválasztott objektumra kattint egy weboldalon.

3. A JavaScript mezőben használja ezt a szintaxist a hivatkozási cél meghatározásához:

window.open("[URL]");

Tehát például ha a kelkáposzta Wikipédia oldalára hivatkozol, akkor a teljes kódsor az lenne, ami az ábrán látható:

window.open("https://en.wikipedia.org/wiki/Kale");

4. Mentse az Illustrator fájlt SVG-fájlként.

JavaScript-részlet csatolása egy SVG-fájlhoz, hogy egy kattintható hivatkozást hozzon létre az ábrán.

A fájl készen áll arra, hogy átadja a webfejlesztőnek. (Vagy ha ez a másik szerepe, megváltoztathatja a kalapokat, és felveheti a fájlt kedvenc kódszerkesztőjében, hogy integrálja egy webprojektbe).

Alternatív megoldásként egyszerűen beágyazhatja a mentett SVG-fájlt egy weboldalba. A hivatkozás nem lesz elegáns (amíg egy webdesigner nem módosítja a generált CSS-t, addig például nem lesz benne tipikus link ikon, ha fölé viszi az egeret). De működni fog, és minden bizonnyal használható lesz prototípusok készítésére és tesztelésére, mielőtt a weboldal elkészül.

Ne próbálja meg az Illustrator szelettechnikáját használni az SVG-fájlok mentéséhez. A szeletek mögötti technológia raszter alapú, és nem illeszkedik a vektor alapú kimenethez.