Znając już podstawy SVG, przyjrzyjmy się różnym sposobom dodawania grafiki w tym formacie na stronę internetową. Pierwszy sposób, polegający na bezpośrednim dodaniu SVG do dokumentu, używaliśmy w poprzednim artykule.
Bezpośrednie dodanie SVG do strony HTML5
<html>
<head> <script>
function rysujOkrag(evt)
{
var okrag= evt.target;
var promien= okrag.getAttribute("r");
if (promien== 50)
{
promien= 75;
}
else
{
promien= 50;
}
okrag.setAttribute("r",promien);
}
</script>
</head>
<body>
<svg width="300px" height="300px">
<text x="25" y="50" font-size="24">SVG Okrąg</text>
<text x="25" y="275">Kliknij, aby zmienić rozmiar.</text>
<circle cx="125" cy="150" r="50"
fill="green" stroke="yellow" stroke-width="3"
onclick="rysujOkrag(evt)" />
</svg>
</body>
</html>
Kod będzie działał w przeglądarce, która obsługuje HTML5 i inline SVG (np. Internet Explorer 9). Metoda pozwala na pełne wykorzystanie mocy drzemiącej w HTML5, ale trzeba liczyć się z tym, że nie wszyscy Internauci korzystają z nowoczesnych przeglądarek. O zapobieganiu i rozwiązywaniu takich problemów powiemy w dalszej części kursu.
Bezpośrednie dodanie SVG do strony XHTML
Gdyby nie HTML5, to pewnie ten sposób podalibyśmy jako zalecany. Wystarczy użyć odpowiedniej przestrzeni nazw i zapisać jako .xhtml. Rozwiązanie będzie działało na przeglądarkach, które obsługują grafikę w formacie SVG. Przede wszystkim jest ich dość sporo, a poza tym obsługa samej grafiki w formacie SVG to nie taka nowość. Przykładowo przeglądarka Opera radzi sobie z tym nieźle już od 4 lat! Tak czy inaczej, ogromna strata to niestety potencjał HTML5, który pozostanie niewykorzystany.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Dodawanie SVG - metoda inline</title>
<script language="javascript" type="text/javascript">
<![CDATA[
var mojOkrag;
var r;
window.onload = function() {
mojOkrag = document.getElementById('okrag');
r = mojOkrag.getAttribute("r");
}
function powieksz() {
r = 2*r;
mojOkrag.setAttribute("r",r);
}
function pomniejsz() {
r = r/2;
mojOkrag.setAttribute("r",r);
}
]]>
</script>
</head>
<body>
<svg width="200px" height="200px" version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<circle id="okrag" cx="100" cy="100" r="50"
style="stroke: black; fill: green;"
onmouseover="powieksz()" onmouseout="pomniejsz()"/>
<rect x="0" y="0" width="100%" height="100%" style="fill: none; stroke: green;"/>
</svg>
</body>
</html>
Grafika SVG w pliku zewnętrznym
Pierwotnym zamysłem format SVG było stworzenie formatu plików grafiki wektorowej z rozszerzeniem .svg. Nic dziwnego, że SVG możemy także wyodrębnić i zapisać jako osobny plik, do którego później można się odwołać.
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
onclick="akcja(evt)">
<script language="javascript" type="text/javascript">
<![CDATA[
function akcja(evt)
{
var mojProst= evt.target;
if (mojProst.id != "zielonyProst")
{
alert("Kliknij na prostokącie");
document.location.reload();
}
var szer= mojProst.getAttribute("width");
if (szer== 50)
mojProst.setAttribute("width", 100);
else
mojProst.setAttribute("width", 50);
}
]]>
</script>
<rect x="0" y="0" width="100%" height="100%"
style="fill: none; stroke: black; stroke-width: 3px;" />
<rect id="zielonyProst" x="100" y="100" width="50" height="50"
fill="red" stroke="black" />
</svg>
Osadzenie pliku SVG na stronie
Metoda prosta w implementacja, choć niosąca ryzyko, że niektóre przeglądarki nie będą obsługiwały danego rodzaju osadzania (jako iframe, embed, object, img i background-image w CSS). Ponadto utrudnione jest oskryptowanie SVG.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Osadzanie pliku SVG</title>
</head>
<body>
<img src="standAlone.png" alt="Alternatywa dla pliku SVG" />
</object>
</body>
</html>
Wtyczka Adobe SVG
Dla formalności dodamy, że można nie baczyć na obsługę formatu SVG przez przeglądarki i wymusić skorzystanie z wtyczki SVG, takiej jak wydanej przez firmę Adobe. Sposób niezalecany z kilku powodów. Po pierwsze wtyczka może powodować nieprzewidywalne zachowania w przeglądarce. Niektórzy są do tego stopnia ostrożni, że żadnych wtyczek nie instaluję w ogóle. Po drugie, nie mamy pewności jak długo dostawca wtyczki będzie aktualizował i dostosowywał swoje narzędzie do specyfikacji, która jest uaktualniana przez W3C. Wspomniana przed chwilą wtyczka szybko doczekała się swojego końca. Adobe ogłosiło zakończenie wspierania wtyczki, uzasadniając że wiele przeglądarek dobrze radzi sobie z grafiką w formacie SVG i nie ma potrzeby dalej rozwijać wtyczki.
