Fundamentos da SVG
Crie gráficos de alta resolução para suas aplicações web independentes de dispositivos ou plataformas
Descrição do livro
SVG (Scalable Vector Graphics) é uma tecnologia desenvolvida pelo W3C (World Wide Web Consortium) para criar gráficos vetoriais escaláveis, com base na linguagem XML. Define a sintaxe para criação de imagens estáticas capazes de serem animadas, de responder a ações interativas, de serem estilizadas com CSS, de serem incorporadas à HTML e de receberem vários tipos de efeitos gráficos. Por ser uma aplicação XML a SVG proporciona o desenvolvimento de páginas web muito mais leves, rápidas e com alto potencial de interatividade. Ao contrário das imagens nos formatos GIF, JPEG e PNG as imagens SVG escalam apropriadamente em qualquer dispositivo sem perder resolução adaptando-se ao tamanho da área de visualização quer o dispositivo seja um telefone portátil, um monitor de grandes dimensões ou uma impressora de alta definição.
Este livro tem por objetivo fornecer aos profissionais envolvidos com o desenvolvimento para a web os conceitos fundamentais e técnicas de programação necessárias para criar gráficos SVG. Fornece as informações básicas e mostra a sintaxe necessária à criação de formas gráficas vetoriais simples bem como apresenta e detalha os principais métodos e propriedades da API JavaScript e da linguagem SMIL, para adicionar interatividade aos gráficos vetoriais.
Descreve os componentes, mecanismos e funcionalidades da linguagem. As explicações teóricas são feitas em linguagem corrente e clara, dispensando, sempre que possível, o jargão técnico avançado, e são acompanhadas de exemplos práticos explicados passo a passo e complementados por arquivos XML para consulta. Destina-se aos profissionais envolvidos na criação de aplicações web e desktop, tanto na área de design quanto na de desenvolvimento e programação.
Neste livro você aprenderá como:
• Criar formas e preenchimento de gráficos.
• Inserir textos em um gráfico SVG.
• Aplicar estilos aos gráficos SVG.
• Criar gradientes e padrões e as técnicas para preencher gráficos SVG com esses objetos.
• Criar efeitos gráficos com recortes e máscaras.
• Obter variados efeitos gráficos com uso de filtros.
• Transformar gráficos com a linguagem SVG.
• Criar animações com uso da linguagem SMIL.
• Usar a linguagem JavaScript para adicionar interatividade à gráficos SVG.
• Usar editores para gráficos SVG. Ver menos ▲
Sumário
Sumário
- Agradecimentos
- Isenção de responsabilidade
- Sobre o autor
- Introdução
- Para quem foi escrito este livro
- Convenções tipográficas
- Site do livro
- Capítulo 1 ■ Introdução à SVG
- 1.1 Introdução
- 1.2 Histórico
- 1.2.1 SVG no W3C
- 1.2.2 Tecnologias SVG
- 1.3 Vantagens da SVG
- 1.4 Suporte à SVG
- 1.4.1 SVG Web
- 1.5 Estrutura XML
- 1.5.1 Prólogo XML
- 1.5.2 DOCTYPE XML
- 1.5.3 Elemento raiz
- 1.6 Inserção SVG em página HTML
- 1.6.1 Elemento embed
- 1.6.2 Elemento object
- 1.6.3 Elemento iframe
- 1.6.4 Elemento img
- 1.7 Sistema cartesiano
- Capítulo 2 ■ Formas básicas
- 2.1 Elemento rect
- 2.1.1 Cor de preenchimento
- 2.1.2 Bordas arredondadas
- 2.1.3 Contorno
- 2.1.4 Opacidade
- 2.2 Elemento line
- 2.2.1 Extremidade da linha
- 2.2.2 Linhas tracejadas
- 2.2.3 Opacidade em linhas
- 2.3 Elemento circle
- 2.3.1 Cor de preenchimento
- 2.3.2 Contorno
- 2.3.3 Opacidade
- 2.4 Elemento ellipse
- 2.4.1 Cor de preenchimento
- 2.4.2 Contorno
- 2.4.3 Opacidade
- 2.5 Elemento polygon
- 2.5.1 Cor de preenchimento
- 2.5.2 Contorno
- 2.5.3 Opacidade
- 2.6 Elemento polyline
- 2.1 Elemento rect
- Capítulo 3 ■ Caminhos
- 3.1 Elemento path
- 3.1.1 Linhas e curva quadrática
- 3.1.2 Curva cúbica
- 3.1.3 Curva elíptica
- 3.2 Atributo Z
- 3.3 Atributo fill-rule
- 3.4 Elemento marker
- 3.1 Elemento path
- Capítulo 4 ■ Elementos estruturais
- 4.1 Elemento svg
- 4.1.1 Atributo version
- 4.1.2 Atributo baseProfile
- 4.1.3 Atributos x e y
- 4.1.4 Atributos width e height
- 4.1.5 Atributo viewBox
- 4.2 Elemento g
- 4.3 Elemento defs
- 4.4 Elemento use
- 4.5 Elementos title e desc
- 4.6 Elemento symbol
- 4.7 Elemento image
- 4.7.1 Atributos x e y
- 4.7.2 Atributos width e height
- 4.7.2 Atributos xlink:href
- 4.1 Elemento svg
- Capítulo 5 ■ Textos
- 5.1 Elemento text
- 5.1.1 Atributos x, y e style
- 5.1.2 Atributos dx e dy
- 5.1.3 Propriedade baseline-shift
- 5.1.4 Propriedade text-anchor
- 5.1.5 Atributo textLength
- 5.1.6 Atributo lengthAdjust
- 5.1.7 Propriedade writing-mode
- 5.1.8 Propriedade glyph-orientation-vertical
- 5.1.9 Atributo transform
- 5.2 Elemento textPath
- 5.2.1 Atributo startOffset
- 5.1 Elemento text
- Capítulo 6 ■ Estilização
- 6.1 Introdução
- 6.2 Estilização inline
- 6.3 Estilização incorporada
- 6.4 Estilização externa
- Capítulo 7 ■ Gradientes e padrões
- 7.1 Introdução
- 7.2 Gradientes
- 7.2.1 Gradiente linear
- 7.2.2 Gradiente radial
- 7.3 Padrões
- 7.3.1 Elemento pattern
- Capítulo 8 ■ Recortes e máscaras
- 8.1 Recortes
- 8.1.1 Elemento clipPath
- 8.2 Máscaras
- 8.2.1 Elemento mask
- 8.1 Recortes
- Capítulo 9 ■ Filtros
- 9.1 Introdução
- 9.2 Elemento filter
- 9.2.1 Filtro feGaussianBlur
- 9.2.2 Filtro feColorMatrix
- 9.2.3 Filtro feConvolveMatrix
- Capítulo 10 ■ Transformações
- 10.1 Translate
- 10.2 Scale
- 10.3 Rotate
- 10.4 Skew
- Capítulo 11 ■ Animações
- 11.1 Introdução
- 11.2 Elemento animate
- 11.4 Atributos values, begin, end e repeatCount
- 11.5 Atributo keyTimes
- 11.6 Animação de múltiplos objetos
- 11.7 Medida de tempo
- 11.8 Atributo calcMode
- 11.9 Elemento set
- 11.10 Elemento animateColor
- 11.11 Elemento animateTransform
- 11.12 Atributo additive
- 11.13 Elemento animateMotion
- 11.14 Atributo rotate
- Capítulo 12 ■ Script
- 12.1 Introdução
- 12.2 JavaScript antigo
- 12.3 JavaScript atual
- 12.4 Métodos getAttribute e setAttribute
- 12.5 Eventos
- 12.6 SVG DOM
- 12.6.1 Método getElementsByTagNameNS
- 12.6.2 Propriedade nodeName
- 12.6.3 Propriedade childNodes
- 12.6.4 Propriedades firstChild e lastChild
- 12.6.5 Propriedade nextSibling
- 12.6.6 Método parentNode
- 12.6.7 Propriedade attributes
- 12.7 Criando objetos SVG
- 12.7.1 Método createElementNS
- 12.7.2 Método appendChild
- 12.7.3 Método createTextNode
- 12.8 Funções especiais
- 12.8.1 Método getBBox
- 12.8.2 Método getTotalLength
- 12.8.3 Método getPointAtLength
- 12.9 Métodos para textos
- 12.9.1 Método getNumberOfChars
- 12.9.2 Método getComputedTextLength
- 12.9.3 Método getSubStringLength
- 12.9.4 Método getStartPositionOfChar
- 12.9.5 Método getEndPositionOfChar
- 12.9.6 Método getExtentOfChar
- 12.9.7 Método getRotationOfChar
- 12.9.8 Método getCharNumAtPosition
- 12.9.9 Método selectSubString
- 12.9.10 Exemplo
- 12.10 SVG e HTML
- Capítulo 13 ■ Editores SVG
- 13.1 Introdução
- 13.2 SVG-edit
- 13.2.1 Área 2
- 13.2.2 Área 3
- 13.2.10 Personalização
- 13.3 Inkscape
- Referências bibliográficas
- Índice remissivo
Sobre o autor
Maurício Samy Silva é graduado em Engenharia Civil pelo Instituto Militar de Engenharia (IME). Exerceu o magistério paralelamente à Engenharia e foi professor de Geometria Descritiva e Matemática. Sua experiência com desenvolvimento iniciou-se em 1999. Em 2003 lançou o site https://maujor.com, que se tornou referência nacional em CSS, com a… Ver perfil completo ▶
Livros relacionados
Opinião dos leitores
Nilo C T
Um bom livro que, embora introdutório, estabelece muitos conceitos sobre SVG. Achei que tem erros tipográficos demais, que por serem evidentes não prejudicam, apesar de incomodarem a leitura. Os exemplos poderiam ter sido mais criativos também, mas são bem objetivos (com exceção do exemplo criar-objeto.xml do cap. 12 - muito divertido!). Não é um livro perfeito, mas ajudou em vários aspectos, recomendo a leitura!
Ronildo N de S
Muito bom.
Carlos D A de M
Recomendo! Uma obra que condensa e trata bem o assunto. Pessoalmente adquiri a obra em vistas de aplicar em minhas aplicações Android os recursos SVG, inclusive já havia utilizado com HTML5 em uma aplicação híbrida no Android com uso do webkit, mas agora o SVG passou a ser suportado nativamente no Android com uso do SDK da Google.
Moacir B
Aborda exatamente o que título se propõe, os fundamentos, sem entrar nos detalhes desnecessários para um iniciante, porém é tão prático que acabou se tornando um guia rápido para mim no trabalho, pois a documentação oficial apesar de excelente é longa e nem sempre temos o tempo necessário para lê-la. Praticamente todos os livros deste autor são ótimos, parabéns!
Títulos relacionados