1. Főoldal
  2. Cikkek
  3. Dev
  4. Körvonalas betűk SVG-vel

Körvonalas betűk SVG-vel

Dev

Hát mit mondhatnék, a cím igazából mindent elárul a mai bejegyzésről. Szerintem egy nagyon hasznos dologról lesz szó, úgyhogy érdemes elolvasni ezt a bejegyzést!

Gondolom már sokatoknak megfordult a fejében, hogy nem lenne rossz saját weboldalra valami érdekes dolgot készíteni. Sőt, szerintem még a fehér hátterű, körvonalas betűk is sokatoknak megfordult a fejében! Hát igen, ahogyan a legtöbb dolgot, ezt is eléggé könnyen meg lehet oldani, méghozzá SVG-vel. Egy alapszintű HTML és CSS tudás elég hozzá, semmi több nem kell.

Én most példának az INTO.HU logóját fogom elkészíteni. Először is tervezzük meg, hogy hol szeretnénk megjeleníteni az oldalunkon belül a betűt, szót, vagy szöveget. Ezután elővesszük a HTML tudásunkat és létrehozunk egy SVG-t. Tessék? HTML+SVG? Igen! HTML-ben a már megszokott módon létrehozunk egy új taget. Most a kis kacsacsőrök közé nem html, body, head, title, div, a, span, b, s, vagy más betűt/szavat írunk, hanem azt, hogy svg.

<svg></svg>

Ettől most még nem történik semmi, úgyhogy muszáj lesz folytatni a szerkesztést. Először adjuk meg az SVG alapvető tulajdonságait! (szélesség, magasság - az adatok pixelben számítódnak)

<svg height="40" width="120"></svg>

Az SVG-n belül most szöveget fogunk elhelyezni. Ahogyan a tutorial elején említettem én most az INTO.HU szöveget írom be az SVG-be:

<svg height="40" width="120">
<text x="0" y="40">INTO.HU</text>
</svg>

 

Így már meg is jelenítettünk egy szöveget (vagyis inkább szavat).

A tutorialban egyszerű példával szemléltetek mindent, úgyhogy legyen a szöveg fehér, a körvonala pedig fekete. Ezt a fill, stroke, illetve a stroke-width tulajdonságok megadásával tudjuk megoldani.

<svg height="40" width="120">
<text x="0" y="40" fill="white" stroke="black" stroke-width="2">INTO.HU</text>
</svg>

 

A stroke-width értéke itt is ugyanúgy pixelben számítódik. Gondolom felvetődik a kérdés a kezdőkben, hogy oké, de én egy saját színkódra szeretném cserélni a fekete és fehér részeket! Lehetséges ez? Igen, lehetséges! A példában nem használtam színkódokat, hogy érthető legyen, hogy melyik része lesz fehér, illetve melyik része lesz fekete a szövegnek. Íme, le lehet cserélni a színeket színkódokra:

<svg height="40" width="120">
<text x="0" y="40" fill="#FFF" stroke="#000" stroke-width="2">INTO.HU</text>
</svg>

 

Ezután már csak egy kis CSS hiányzik! 

svg text {
  font-size: 40px;
}

Jó webszerkesztést kívánok mindenkinek! Ezen az oldalon találhattok még érdekes SVG megoldásokat, tutorialokat. Ha valami így sem érthető, nyugodtan kérdezhettek itt, hozzászólásban, vagy privát üzenetben!

kovjonas profilképe
Kovács Jónás @kovjonas +86 Hobbi web-designer, kezdő 3D modellező, LEGO őrült.
2 hozzászólás
Hozzászóláshoz jelentkezz be vagy Regisztrálj!
vagyis inkább szavat
Magyarúl:szót!
Egyébként gratulálok,jó kis cikk lett. ;)
2014.09.05 20:36
Köszi! :) Hiba javítva lesz...
2014.09.05 23:11