svg ikony a společný styl

Představujeme tři způsoby jak definovat svg ikony se společnými atributy.

• Pomocí tagu img - obrázek nebude reagovat na přejetí myší
• Pomocí tagu svg ^(*) - vše funkční, zobrazení může(musí) být definováno v kmenové stylopisné kaskádě.
• Pomocí tagu object, stylopis může být interní (<style>... </style>), externí soubor v xml deklaraci.

Jednoduchá ikona ve formátu svg obsahuje i css s popisem barvy podkladu a popis barvy podkladu :hover.

Obsah svg je seskupen, skupina má ID a podkladový čtverec je deklarován bez barvy pozadí, zato s třídou barva. Stylopisný kontejmer je umístěn v úvodu kontejneru svg.

<style type="text/css">
.barva{
fill:#F7941E;
}
#maingr:hover .barva{fill:#22B573;
}
</style> 

Obrázek svg vlevo je vložen pomocí tagu IMG - vidíte že u IMG chybí podpora události :hover. Obrázek v pravo je vložen jako object - bude fungovat stylopis i s kontrolou událostí.

Třetí obrázek je vložen jako inline svg tag. Jeho zobrazení je řízeno přímo stylopisem webu - deklarace uvedená nahoře je zapsána přímo v gen.css.

Tyto tři obrázky vložené jako OBJECT maji v deklaraci uveden odkaz :

<?xml-stylesheet href="https://blog.alff.info/styles/svg.css" type="text/css"?>

V souboru svg.css je uvedeno:

.barva{fill:#F7941E;}
#maingr:hover .barva{fill:#22B573;}

*)Inline obrázek je nahrán pomocí vkládacího kódu SVGINTERNALnr.