10.3. fejezet¶

SVG¶

Az SVG (Scalable Vector Graphics) egy XML-alapú képleíró nyelv, amelyet két- és háromdimenziós vektorgrafikák meghatározására használnak. Az SVG egyik legnagyobb előnye, hogy független a felbontástól, vagyis a képeket végtelenül nagyíthatjuk minőségromlás nélkül, ami különösen hasznos modern webfejlesztésben.

SVG Elhelyezése HTML-ben¶

Az SVG-t többféleképpen beilleszthetjük egy HTML dokumentumba:

Inline SVG: Az SVG kód közvetlenül a HTML fájlban található.
Külső SVG Fájl Betöltése: Az SVG-kép betöltése egy külső fájlból.
Beágyazott Objektek: Az SVG-kép beágyazása <object> vagy <embed> elemek segítségével.

Inline SVG¶

<!DOCTYPE html>
<html lang="hu">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Inline SVG Példa</title>
</head>
<body>
    <h2>Inline SVG</h2>
    <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
        <circle cx="100" cy="100" r="80" fill="lightblue" stroke="blue" stroke-width="5" />
        <text x="100" y="105" font-size="20px" fill="black" text-anchor="middle">SVG</text>
    </svg>
</body>
</html>

Az <svg> meghatározza az SVG konténert. A width és height attribútumokkal beállíthatjuk a méretét. A <circle> létrehoz egy kört cx (x koordináta), cy (y koordináta), r (sugár), fill (kitöltőszín), stroke (keretszín) és stroke-width (keret szélessége) attribútumokkal. A <text> szöveget helyez el az SVG-ben. Az x és y attribútumok a szöveg pozícióját határozzák meg, a font-size a betűméretet, a fill a szövegszínt, a text-anchor pedig a szöveg igazítását.

Külső SVG¶

<!DOCTYPE html>
<html lang="hu">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Külső SVG Fájl</title>
</head>
<body>
    <h2>Külső SVG Fájl Betöltése</h2>
    <img src="example.svg" alt="SVG Kép">
</body>
</html>

További SVG elemek és attribútumok¶

Az SVG számos különféle elemet támogat, amelyekkel bármilyen vektoros grafikát létrehozhatunk:

<rect>: Téglalap rajzolására.
<line>: Egyenes vonal rajzolására.
<polygon>: Sokszög rajzolására.
<polyline>: Többszörös összekötött vonal rajzolására.
<path>: Összetett alakzatok rajzolására Bézier-görbék és vonalak kombinációjával.

Utolsó frissítés: 2024-08-16 17:57:33