Esta tradução está incompleta. Por favor, ajude a traduzir este artigo.
SVG é uma linguagem XML, similar ao XHTML, na qual pode ser usada para desenhar gráficos (imagens), como os mostrados à direita. Ela pode ser usada para criar uma imagem qualquer especificando todas as linhas e formas necessárias, para modificar uma imagem raster já existente ou fazer ambas as opções. A imagem e seus componentes também podem ser transformados, compostas em conjunto, ou filtradas para mudar completamente sua aparência.
SVG surgiu em 1999 após vários outros formatos terem sido submetidos à W3C e não terem sido totalmente ratificados. While the specification has been around for quite a while, browser adoption has been fairly slow, and so there is not a lot of SVG content being used on the web right now (as of 2009). Even the implementations that are available often are not as fast as competing technologies like HTML5 Canvas or Adobe Flash as a full application interface. SVG does offer benefits over both implementations, some of which include having a DOM interface available for it, and not requiring third-party extensions. Whether or not to use it often depends on your specific use case.
HTML provides elements for defining headers, paragraphs, tables, and so on. In much the same way SVG provides elements for circles, rectangles, and simple and complex curves. A simple SVG document consists of nothing more than the
<svg> root element and several basic shapes that build a graphic together. In addition there is the
<g> element, which is used to group several basic shapes together.
Before you começar
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 in 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 graphic 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.