深入理解SVG 内容简介

深入理解SVG 内容简介

深入理解SVG 目录

深入理解SVG 精彩文摘

《深入理解SVG》介绍SVG绘画,包括基础知识和如何通过混合和搭配工具来生成复杂的效果。主要内容包括:把SVG代码转换为可视图形的渲染模型,如何使用颜色,透明度的控制方法以及它对图片的影响,渲染服务和渐变。《深入理解SVG》适合所有想利用SVG提高Web体验的读者。版权信息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 所有好用的标记都基于伟大的DOM1.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、网页设计,甚至有 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 的图形编辑器)中这将导致解析失败。它也会忽略自定义的命名空间,将不能识别的属性或标签名变成小写,甚至引起其他不能预期的变化。

类似文章

发表评论

您的电子邮箱地址不会被公开。