SVG - odc 1

Tym razem więcej notatek o SVG. Ich źródłem w przeważającej większości jest prezentacja Modernizing Your Website: SVG Meets HTML5. Bardzo dobra, solidna prezentacja, jedna z najlepszych jakie widziałem. Ale nawet najlepsza prezentacja nie byłaby interesująca bez interesującej technologii, jaką jest SVG. Jestem pod wrażeniem, porównywalnym z Knockout czy CSS3. Znowu funkcjonalności znane z aplikacji XAML, nie chodzi mi tu o banalne porównanie do markupu czy kształtów ale o bardziej wyrafinowane zagadnienia. Weźmy patterny czy zaawansowane możliwości tekstu, który może mieć dowolne wypełnienie oraz być rysowanym po krzywej (jak ktoś pamięta PathListBox - jedno z ważniejszych features Blend 4 dla Silverlight i WPF). Ale to nie wszystko. Prawdziwą bombą jest połączenie SVG z CSS (oprócz dość oczywistego stylowania elementów SVG w CSS, w CSS możemy odnosić się do definicji z SVG!), mniejszą sterowanie z poziomu Java Script (wydaje się dość oczywiste –:)). Dobrym pomysłem jest zipowanie. Co jest słabsze?  Np. dublowanie gradientów, transformacji, animacji z CSS (czy odwrotnie?), dwa DOM (mimo zgrabnego skomponowania z resztą HTML za pomocą <svg> mamy dwa DOM - Core i SVG co jest pewną pozostałością z przeszłości, gdzie HTML i SVG były tworzone obok). Aczkolwiek pamiętajmy że wszystkie standardy są ciągle rozwijane, może z czasem dojdzie do jeszcze większej unifikacji i integracji ...

Tak samo jak w HTML mamy dostęp do DOM z poziomu JS oraz możemy stylować jego elementy za pomocą CSS.

Porównanie wydajności Canvas i SVG w zależności od rozmiaru ekranu i liczby elementów

Sposoby zawierania SVG w stronach webowych

Standalone

• <object data="logo.svg" type="image/svg+xml" width="100" height="100"></object>
• <img src="logo.svg" width="100" height="100"/>  (no scripting)
• { background-image: url('background.svg'); }
• <iframe src="logo.svg" width="100" height="100"/>
• <embed src="logo.svg" width="100" height="100"/>

Inline

• HTML5
• XHTML

Zastosowanie

• Dokumenty o dużym stopniu wierności (mapy, plany, techniczne diagramy, wykresy …)
• Wektorowe obrazki (loga, diagramy)
• Interfejs użytkownika (mniej banalne kształty, stylowanie CSS, interaktywność)
• Ozdobne teksty

Używanie

Atrybut viewbox

<svg viewBox="0 0 100 100">  (współrzędne x i y punktu najbardziej na lewo, szerokość, wysokość)

Stylowanie i hit detection

• Stylowanie - aktualizacje obrazka po stronie klienta
• Hit detection - obrazki png, GIF, JPEG są ograniczone pod względem kształtu

Ozdobne teksty

Więcej możliwości niż w samym HTML i CSS

• gradienty i patterny
• tekst po krzywej

Definicje (gradient, pattern, path), użytkowanie definicji (path)

Animowany zegar napędzany skryptem

Tips

• Zawsze <! DOCTYPE html>
• Overflow w HTML5 domyślnie widzialny.  Z przycięciem:  <svg overflow=”hidden”> lub w CSS
• Wysokość pierwszej linii tekstu: <text> (domyślnie poza obszarem!),  <text y=”30”>
• Dostępność
• Definiować tagi <title> i <desc>
• Używać atrybutu focusable dla tabulacji  <rect focusable="true" onfocus="doStuff();" width="100" height="100"/>
• Przestrzenie nazw w plikach .svg
• Zawsze zawierać xmlns="http://www.w3.org/2000/svg"
• Przy korzystaniu z xlink:href dodatkowo zawsze zawierać xmlns:xlink="http://www.w3.org/1999/xlink"
• Wykorzystywać SVG DOM. Możemy korzystać z dwóch DOM
• Core DOM
• np. myCircle.setAttribute(“r”, “42”);
• Znany, spójny
• Często wolniejszy
• SVG DOM
• np. myCircle.r.baseVal.value = 42;
• Często szybszy

SVG DOM

• Większość obiektów SVG DOM zawiera podstawowy komponent i animowany komponent
• Ignorować animowany
• Zawsze używać podstawowego
• Typy
• Atrybuty prezentacyjne np. myCircle.style.fill
• Wartości np. myCircle.r.baseVal.value
• Obiekty np. mySVG.viewBox.baseVal.x
• Listy np. myRect.transform.baseVal.getItem(0)

             

                   Używać SVG DOM chyba że zmieniamy dużo obiektów DOM w liście

• Kompresja
• Kompresowane Gzip pliki .svgz
• Przy korzystaniu z .svgz zawrzeć response header:  Content-Encoding: gzip
• Typ MIME
• image/svg+xml
• IIS7 i niższe wymagają konfiguracji
• Narzędzia do wytwarzania SVG
• Statyczne
• Inkscape
• Adobe Illustrator
• Microsoft Visio

        Fallback behavior

         try {

               if(document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#Structure", "1.1")) {

                    //SVG support! :)

               }

              else {

                   //no SVG support :(

              }

        }

        catch (Exception e) {

              // no  SVG support :(

        }

        Wbudowany fallback dla statycznego obrazka

        <object type="image/svg+xml" data="logo.svg">

                <img src="logo.png">

        </object>

        Biblioteki do fallback

• VML fallback support
• RaphaelJS
• Dojo toolkit
• Flash fallback
• SVGWeb library (no CSS support)