深入理解SVG pdf

深入理解SVG 内容简介

《深入理解SVG》介绍SVG绘画，包括基础知识和如何通过混合和搭配工具来生成复杂的效果。主要内容包括：把SVG代码转换为可视图形的渲染模型，如何使用颜色，透明度的控制方法以及它对图片的影响，渲染服务和渐变。

《深入理解SVG》适合所有想利用SVG提高Web体验的读者。

深入理解SVG 目录

版权信息

O'Reilly Media, Inc．介绍

前言

简介

第1章　你应该知道的事

1.1　SVG通过代码来画图

1.2　SVG始终是开源的

1.3　SVG是XML（有时也是HTML）

1.4　SVG是可压缩的

1.5　图片是形状的集合

1.6　图片中可以包含图片

1.7　文本也是艺术

1.8　艺术源于数学

1.9　SVG是无数canvas的有限集

1.10　SVG是有结构的

1.11　SVG是有样式的

1.12　所有好用的标记都基于伟大的DOM

1.13　SVG是可移动的

1.14　SVG在发展变化

第2章　画家模型

2.1　使用fill属性进行填充

2.2　使用stroke属性描边

2.3　层叠描边和填充

2.4　使用渲染提示属性

第3章 创建颜色

3.1 使用名称生成朦胧玫瑰红

3.2 彩虹三原色

3.3 自定义颜色

3.4 混合和搭配

第4章 透明

4.1 穿透样式

4.2 其他效果

第5章 渲染服务

5.1 渲染和壁纸

5.2 标识资源

5.3 纯色渐变

第6章 简单的渐变

6.1 逐步渐变

6.2 透明渐变

6.3 控制颜色变换

第7章 各种形状和尺寸的渐变

7.1 渐变矢量

7.2 对象边界盒

7.3 在盒子表面绘制

7.4 渐变，变换

第8章 重复

8.1 如何扩展渐变

8.2 无穷渐变映射

8.3 非映射重复

8.4 在HTML中使用（复用）渐变

第9章 径向渐变

9.1 径向渐变基础

9.2 填充盒子

9.3 缩放圆

9.4 调整焦点

9.5 变换径向渐变

9.6 大型渐变

第10章 磁贴与纹理

10.1 搭积木

10.2 适当拉伸

10.3 布局磁贴

10.4 变换磁贴

第11章 完美的图片图案

11.1 层次感

11.2 保持原始图案

11.3 SVG样式的背景图片

第12章 有纹理的文本

12.1 边界文本

12.2 中途切换样式

第13章 绘制线条

13.1 超出边缘的部分

13.2 空盒子

13.3 使用坐标空间

13.4 有图案的线条

第14章 动画

14.1 动画选项

14.2 坐标动画

14.3 交互动画

附录 A 颜色关键词和语法

附录 B 元素，元素属性，样式属性

作者介绍

封面介绍

深入理解SVG 精彩文摘

本书假设你已经了解过 SVG、网页设计，甚至有 JavaScript 编程基础。

每一种语言都有自己的一些缺陷，而这些缺陷对有些开发者来说很明确，但对其他同样优秀的开发者来说却闻所未闻。所以本章将带你一起快速回顾一些你必须知道的东西。

SVG 就是一个图片文件。我们可以像使用 PNG 或 JPEG 等图片文件一样使用它，可以在可视化编辑器中创建和编辑 SVG，也可以将其作为图片嵌入到网页中。

但是 SVG 并不仅仅是图片，它是包含标记元素、文本、样式指令的结构化文档。其他图片格式是告诉计算机在屏幕上哪一点应该绘制什么颜色，而 SVG 是告诉计算机如何通过它的组成部分重组图形。这产生以下两个主要结果。

?SVG 最终在屏幕上的显示依赖于软件对 SVG 规范的支持程度。跨浏览器的兼容性往往是一个问题。　　?对 SVG 的一部分单独进行增加、删除、修改的操作是非常容易的，不用担心会改变 SVG 的其他部分。我们可以在编辑器中进行此类操作，也可以动态地在网页中制作动画或交互图形。

SVG 不仅仅是一组计算机编码指令，它还是人类可读的文本文件。你不仅可以在文本编辑器中编辑 SVG，甚至还可以在有语法高亮和自动补全功能的代码编辑器中编辑它。

本书的所有例子都专注于基本的 SVG 代码。当然你也可以通过可视化编辑器来画形状、选颜色、调整图形展现的其他部分。但是为了完全可控，你需要看一看编辑器实际创建的代码。

文本编辑器中的 SVG 代码看起来非常像 HTML 代码（全是尖括号和属性），但是单独的 SVG 文件通常被解析为 XML。这意味着你的 SVG 通常都可以被 XML 工具解析和操控，也意味着如果你忘记引入 XML 的命名空间或者混淆了 XML 语法的重要细节，你的网页将什么都不显示。

然而，当你直接在 HTML5 标记中插入 SVG 时，它将由 HTML 解析器处理。HTML 解析器会忽略一些错误（比如缺少结束标签或使用不带引号的属性），而在 XML 解析器（或大多数仅支持 SVG 的图形编辑器）中这将导致解析失败。它也会忽略自定义的命名空间，将不能识别的属性或标签名变成小写，甚至引起其他不能预期的变化。