To tłumaczenie jest niekompletne. Pomóż przetłumaczyć ten artykuł z języka angielskiego.

SVG jest  językiem XML, podobnym do XHTML, który może zostać użyty do rysowania grafiki wektorowej, jak te pokazane po prawej stronie. Może zostać użyty do tworzenia obrazów przez określenie wszystkich potrzebnych linii i kształtów, poprzez modyfikację już istniejących obrazów rastrowych, albo poprzez kombinację tych dwóch metod. Obrazy i jego komponenty mogą być również przekształcane, połączone razem, lub filtrowane tak, że całkiem zmienią swój wygląd.

SVG format istnieje od 1999 po przesłaniu kilku konkurencyjnych formatów do W3C i nieudanej pełnej ratyfikacji. SVG jest wspierany przez wszystkie główne przeglądarki. Minusem dokumentu SVG jest ładowanie - może być wolne. SVG oferuje korzyści, niektóre z nich zawierają DOM interface dostępny do tego i nie wymagający rozszerzeń innych firm. To czy używać tego formatu czy nie zależy od konkretnego przypadku.

 

Podstawowe składninki

HTML dostarcza elementy dla definiowania nagłówków, akapitów, tabeli, i wiele więcej. W podobny sposób SVG dostarcza elementy dla kół, prostokątóww i dla krzywych. Zwykły SVG dokument składa się po prostu z <svg> głównego elementu i kliku podstawowych kształtów, które tworzą wspólnie grafikę. Dodatkowo jest tam <g> element, który służy do grupowania kilku podstawowych kształtów razem.

Od tego momentu, obraz SVG może stać się dowolnie skomplikowany. SVG wspiera gradienty, rotacje, filtry, animacje i interakcje z JavaScript i tak dalej. Wszystkie te dodatkowe funkcję języka zależą od tych stosunkowo małych elementów definiujących obszar grafiki.

Zanim zaczniesz

Jest wiele dostępnych aplikacji do rysowania, takich jak Inkscape, które są darmowe i używają SVG jako ich rodzimego (domyślnego) formatu. Jakkolwiek, ten poradnik bęzie polegał na sprawdzonym XML lub edytora tekstowego (Twój wybór). The idea is to teach the internals of SVG to those who want to understand it, and that is best done by dirtying your hands with a bit of markup. You should note your final goal though. Not all SVG viewers are equal and so there is a good chance that something written for one app will not display exactly the same in another, simply because they support different levels of the SVG specification or another specification that you are using along with SVG (that is, JavaScript or CSS).

SVG is supported in all modern browsers and even a couple versions back in some cases. A fairly complete browser support table can be found on Can I use. Firefox has supported some SVG content since version 1.5, and that support level has been growing with each release since. Hopefully, along with the tutorial here, MDN can help developers keep up with the differences between Gecko and some of the other major implementations.

Before starting you should have a basic understanding of XML or another markup language such as HTML. If you are not too familiar with XML, here are some guidelines to keep in mind:

  • SVG elements and attributes should all be entered in the case shown here since XML is case-sensitive (unlike HTML).
  • Attribute values in SVG must be placed inside quotes, even if they are numbers.

SVG is a huge specification. This tutorial attempts to cover the basics. Once you are familiar you should be able to use the Element Reference and the Interface Reference to find out anything else you need to know.

Flavors of SVG

Since becoming a recommendation in 2003, the most recent "full" SVG version is 1.1. It builds on top of SVG 1.0, but adds more modularization to ease implementation. The second edition of SVG 1.1 became a Recommendation in 2011. "Full" SVG 1.2 was meant to be the next major release of SVG. It was dropped for the upcoming SVG 2.0, which is under heavy development right now and follows a similar approach to CSS 3 in that it splits components into several loosely coupled specifications.

Apart from the full SVG recommendations, the working group at the W3C introduced SVG Tiny and SVG Basic in 2003. These two profiles are aimed mainly at mobile devices. The first, SVG Tiny, should yield graphics primitives for small devices with low capabilities. SVG Basic offers many features of full SVG, but doesn't include the ones which are hard to implement or heavy to render (like animations). In 2008, SVG Tiny 1.2 became a W3C Recommendation.

There were plans for an SVG Print specification, which would add support for multiple pages and enhanced color management. This work was discontinued.

Autorzy i etykiety dokumentu

Autorzy tej strony: pan-rzeznik
Ostatnia aktualizacja: pan-rzeznik,