SVG tvůrce

stručný průvodce SVG grafikou

Bitmapa v SVG - element image

Do SVG grafiky je možné vložit i bitmapový obrázek. Nedochází však přitom k jeho konverzi do křivek, bimapa je uložena v samostatném souboru. Vložením tedy jen zobrazíme v prostoru určeném pro vektorovou grafiku bitmapový obraz uložený jinde. K vložení bitmapy používáme element image. Atribut href určuje cestu k bitmapovému obrázku. Jelikož jde vlastně o odkaz, a pohybujeme se ve formátu XML, je třeba před atribut href připsat prefix xlink (xlink:href), a definovat též jmenný prostor xlinku. Jak standard xlink používat je též popsáno na stránce o odkazech v SVG. Dalšími atributy elementu image je x a y, jenž určují souřadnice horního levého rohu obrázku. Rozměry bitmapy jsou pak stanoveny atributy width a height.

Element Image - atributy
atributpopis
xpoloha horního levého rohu obrázku na ose x
ypoloha horního levého rohu obrázku na ose y
widthšířka obrázku
heightvýška obrázku
xlink:hrefcesta k obrázku

Následující příklad je ukázkou kombinace SVG a bitmapové grafiky. V obrázku jsou písmena SVG tvořena bitmapovým obrázkem (samostatně si jej můžete prohlédnout zde), poloprůhledný kruh je vektorovým objektem.

gif_obraz

Zdrojový kód obrázku:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <image x="20px" y="20px" width="100px" height="100px" xlink:href="bitmapa.gif" /> <circle cx="100px" cy="100px" r="50px" fill="blue" stroke="black" opacity="0.5" /> </svg>

Obrázky na stránce jsou ukázkami zobrazení v podobě bitmapy (formát GIF). Pokud chcete zobrazit svg grafiku přímo, klikněte na tlačítko pod textem. Všechny obrázky pak budou nahrazeny elementy object, které zobrazí přímo svg soubory. Nutný je nainstalovaný ADOBE SVG VIEWER.

Nahraď obrázky GIF za SVG

 

xhtml_valid_icon css_valid_icon
texty, webdesign, programování: Jakub Kosek