xml转换成svg图片（如何在网页中使用SVG）

本文目录

• 如何在网页中使用SVG
• 请问一下svg格式用什么软件做
• html5 svg 数据怎么生成
• xml文件如何转换成SVG文件
• android图片系列 （2） - 静态 SVG 图片
• 转换买家购买的图片素材是哪些

如何在网页中使用SVG

如果你只了解可缩放矢量图形 (SVG)，并希望体验 SVG，则你首先需要解决的问题之一是如何向基本网页添加 SVG。 如果你看一下相对基本的网页模板，便可获知如何开始执行此操作。
《!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
***隐藏网址***
***隐藏网址***
《head》
***隐藏网址***
《title》My First SVG Page《/title》
《/head》
《body》
《p》SVG to be inserted here.《/p》
《/body》
《/html》
可通过多种方法向此基本模板添加 SVG。下面的示例演示了一种直接执行此操作的方法。
《?xml version="1.0" encoding="utf-8" standalone="no"?》
《!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
***隐藏网址***
***隐藏网址***
《head》
***隐藏网址***
《title》 My First SVG Page《/title》
《/head》
《body》
***隐藏网址***
width="200px" height="200px"》
《rect x="0" y="0" width="100%" height="100%"
fill="none" stroke="black"/》
《circle cx="100" cy="100" r="50"
style="stroke: black; fill: red;"/》
《/svg》
《/body》
《/html》
提示 为提高现代浏览器之间的兼容性，请将上述示例代码以 xhtml 文件扩展名保存。通过将文件扩展名从 html 更改为 xhtml，可有效地将模板从 HTML 文档转换为 XHTML 文档。这就是为何添加 xml 声明（上一示例中的第一行）并注释掉 meta 元素的原因。有关上一示例的更多详细信息，请参见以下列表。
《?xml version="1.0" encoding="utf-8" standalone="no"?》
xml 声明是一个将文档标识为 XML/XHMTL 的浏览器处理指令。所需的版本特性会指定 XML 文档将遵循的 XML 标准的版本。可选 encoding 特性会指示浏览器如何基于特定字符集解释文档的关联字节（默认编码为 UTF-8）。可选 standalone="no" 特性指示在 DOCTYPE 元素中指定的文档类型定义 (DTD) 将不只是用于验证。请注意，实际上无需指定 standalone=”no”。存在外部标记声明（此示例中为 DTD）时会假定 standalone=”no” 值。
***隐藏网址***
从技术上来说，DOCTYPE
声明不是 HTML 元素。此声明是对 Web 浏览器的说明，它介绍了写入页面的标记语言版本。请注意，此声明指用于指定标记语言规则的
DTD，以便浏览器可以正确呈现内容。DOCTYPE 还允许你使用页面验证程序。在此示例中，XHTML 1.0 Transitional DTD
启用了所有 HTML 元素和特性，包括表象元素和弃用的元素（例如 《font》）。但不允许框架，并且必须将标记编写为格式正确的 XML。
***隐藏网址***
html 元素会告知浏览器，这是一个普通意义上的 HTML 文档，具体而言，它是由 DOCTYPE 指示的 XHTML 文档。xmlns 特性指定 XHTML 文档的 XML 命名空间。通常，开发人员在编写 XHTML 文档时应显式包括 XHTML xmlns 声明。
《head》
利用网页的 head 部分，可以定义页标题、提供搜索引擎信息、设置页位置、添加样式表、编写脚本等。
（例如 base、link、meta、script 和 style）。
***隐藏网址***
meta 元素提供有关文档的元数据。 元数据是有关文档内容的信息（对读者不可见）。此元数据可供浏览器或其他软件（例如，搜索引擎、文档管理系统等）使用。第一个模板（不具有 svg 元素）中的内容特性指定，在服务器传送实际页面内容之前，应先使用名为 Content-Type（其值为 text/html; charset=utf-8）的 HTTP 标头来提供页面（从 Web 服务器到客户端）。利用此过程，浏览器可使用正确的字符编码 (charset=utf-8) 来正常呈现传入页数据 (text/html)。第二个 XHTML (SVG) 示例中注释掉了 meta 元素，因为 XML/XHML 文档中已忽略使用 meta 元素指定字符编码，并且必须将其转换为 xml 声明。开发人员可在对 HTML 使用 meta 元素与对 XML/XHTML 使用 xml 声明之间进行切换。
《title》
通常，title 元素会在浏览器的选项卡中呈现其关联文本。
《/head》
head 的结束元素。
《body》
body 元素是显示的 XHTML 文档的内容的容器。
***隐藏网址***
svg 元素定义了 SVG 文档片断。xmlns 特性定义了 SVG 片断的命名空间。version 特性指示此文档片断遵循的 SVG 语言版本，width 和 height 特性定义 SVG 视区的大小（此示例中为 200 x 200 像素方形）。
《rect x="0" y="0" width="100%" height="100%" fill="none" stroke="black"/》
SVG rect 元素会从视区的左上角或点 (0, 0) 处开始绘制一个具有最大宽度和高度的黑色矩形，该矩形与 SVG 视区相对。此定位勾勒了给定 SVG 视区的轮廓。
《circle cx="100" cy="100" r="50" style="stroke: black; fill: red;"/》
类似地，SVG circle 元素会绘制一个带黑色边框的红色圆圈，其半径为 50 像素。该圆圈位于 200 x 200 像素的 SVG 视区的中心位置。
《/svg》
svg 的结束元素。
《/body》
body 的结束元素。
《/html》
html 的结束元素。
SVG 的呈现方法
还可使用其他方法来呈现 SVG。下表总结了这些方法。
方法
建议文件扩展名
所需的浏览器
优点和缺点
内联 HTML5 .html 天生支持 HTML5 中内联 SVG 的浏览器，例如 Windows Internet Explorer 9。
优点：可充分利用 HTML5 构造。
缺点：可能需要为不支持 HTML5 中的内联 SVG 的浏览器实现回调代码。
内联 XHTML .xhtml 天生支持 SVG 的浏览器，例如 Internet Explorer 9。
优点：许多浏览器当前都支持基于 XHTML 的内联 SVG。
缺点：无法利用 HTML5 构造。
独立 .svg 天生支持 SVG 的浏览器，例如 Internet Explorer 9。
优点：可使用“嵌入”方法轻松嵌入现有内容中。
缺点：无法利用所有 HTML/XHTML 构造。
嵌入 .xhtml 天生支持 SVG 的浏览器，例如 Internet Explorer 9。
优点：通过使用嵌入，使得实现和回调行为变得相对简单。
缺点：为嵌入页中的 SVG 内容编写脚本可能会比较困难。
另外，一些浏览器可能不支持所有形式的嵌入，例如，通过 img 元素或通过 CSS background-image 样式引用 SVG。
插件 .html 天生支持或不支持 SVG 的浏览器。
优点：浏览器无需天生支持 SVG。统一各个浏览器间的 SVG 行为。
优点：插件可能会导致浏览器不稳定，W3C SVG 规范可能会过时，和/或插件提供者不再为插件提供支持（如 Adobe SVG Viewer 插件的情况）。
注意 Windows Internet Explorer 8 天生不支持 SVG，从而需要插件来呈现 SVG。但通过实现适当的回调代码（如本主题稍后所述），你可能不需要 SVG 插件。

请问一下svg格式用什么软件做

svg格式用“AdobeIllustrator”软件做，可以查看而且能够再次svg文件，还能导出保存为svg或其他格式的文件。SVG可缩放矢量图形是基于可扩展标记语言(标准通用标记语言的子集)，用于描述二维矢量图形的一种图形格式。它由万维网联盟制定，是一个开放标准。由于SVG是XML文件，SVG图像可以用任何文本器创建，但它往往是与一个绘图程序一起使用，如Inkscape，更方便地创建SVG图像。
***隐藏网址***

html5 svg 数据怎么生成

• 去找 SVG 转换器，就能把图片从位图转换成 SVG 代码

• 1，SVG 即 Scalable Vector Graphics，是一种用来绘制矢量图的 HTML5 标签。只需定义好XML属性，就能获得一致的图像元素。
  使用SVG之前先将标签加入到HTML body中。就像其他的HTML标签一样，你可以为SVG标签为之添加ID属性。也可以为之添加css样式，例如“border-style:solid;border-width:2px;”。SVG标签跟其它的HTML标签有通用的属性。可以用height="100px" width="200px" 为其添加高度和宽度。
  现在就将SVG元素加入到我们HTML代码中，SVG提供很多绘图形状，例如线条、圆、多边形等。
  2、SVG线条：
  SVG线条用标签定义，在此标签内还可以定义其他的属性。
  该标签包括像起点坐标(x1,y1)和终点坐标(x2,y2)这样的属性。指定x1,y1,x2,y2值来设定起点终点坐标。在指定好坐标后，可以为之添加一些样式，在style属性中使用“stroke:Green;”为线条指定颜色。同样你也可以用stroke-width:2为线条设置宽度。
  《!DOCTYPE html》
  《head》
  《title》Mrbool.com - HTML5 Tutorials《/title》
  《/head》
  《body》
  《h3》HTML5 SVG Line Example《/h3》
  ***隐藏网址***
  《!--《line x1="0" y1="0" x2="50" y2="200" style="stroke:rgb(100,100,0);stroke-width:5"/》--》
  《line x1="10" y1="20" x2="100" y2="200" style="stroke:Green;stroke-width:2"/》
  《/svg》
  《/body》
  《/html》

xml文件如何转换成SVG文件

xsl只能将xml转化为xml,html,txt 不是这样的，XSL可以输出任何格式正确的XML文档。因为这个特性，我们可以用它来进行以下几种格式的转换：XML-》HTML、XML-》XML、XML-》SVG以及XML-》VRML等，参见： 其中的test.svg是这样的：

android图片系列 （2） - 静态 SVG 图片

SVG 图片是一种可支持任意缩放的图片格式，使用 xml 定义，使用 canvas 中 path 路径来完成绘制，和我们传统使用的 BitMap位图有很大的区别。

SVG 在前端早就普及了，在android 中是 google 是在5.0之后开始支持的，14年出来之后兼容是个大问题，随着2016.2 V7包 23.2.0版本的发布才算是有个相对完善的兼容使用方案。

SVG 的概念我就不写了，拿来主义啦，原文： Android Vector曲折的兼容之路

不瞎逼逼，我们先来看一看 android 中的 SVG 矢量图是个什么东东

看到没有，这就是一个 SVG 矢量图片，就是一个 xml 文件，右边是预览，先说下，这东西的好处：缩放不失真，体积小。这一个 SVG 图片只有970个字节...强大吧，比 png 格式的图片强的没边了吧，png 我们还得适配，做多套，然后一个一个改名字复制到工程里，有了 SVG 妈妈再也不担心我们写作业啦...

这里需要解释下这里的几个标签：

这里有一分详细的属性说明：

好了下面开始介绍 SVG 啦

首先，需要讲解两个概念——SVG和Vector。

SVG，即Scalable Vector Graphics 矢量图，这种图像格式在前端中已经使用的非常广泛了

Vector，在Android中指的是Vector Drawable，也就是Android中的矢量图

因此，可以说Vector就是Android中的SVG实现，因为Android中的Vector并不是支持全部的SVG语法，也没有必要，因为完整的SVG语法是非常复杂的，但已经支持的SVG语法已经够用了，特别是Path语法，几乎是Android中Vector的标配

Android以一种简化的方式对SVG进行了兼容，这种方式就是通过使用它的Path标签，通过Path标签，几乎可以实现SVG中的其它所有标签，虽然可能会复杂一点，但这些东西都是可以通过工具来完成的，所以，不用担心写起来会很复杂。

Path指令解析如下所示：

支持的指令：

M = moveto(M X,Y) ：将画笔移动到指定的坐标位置
L = lineto(L X,Y) ：画直线到指定的坐标位置
H = horizontal lineto(H X)：画水平线到指定的X坐标位置
V = vertical lineto(V Y)：画垂直线到指定的Y坐标位置
C = curveto(C X1,Y1,X2,Y2,ENDX,ENDY)：三次贝赛曲线
S = smooth curveto(S X2,Y2,ENDX,ENDY)
Q = quadratic Belzier curve(Q X,Y,ENDX,ENDY)：二次贝赛曲线
T = smooth quadratic Belzier curveto(T ENDX,ENDY)：映射
A = elliptical Arc(A RX,RY,XROTATION,FLAG1,FLAG2,X,Y)：弧线
Z = closepath()：关闭路径

坐标轴为以(0,0)为中心，X轴水平向右，Y轴水平向下
所有指令大小写均可。大写绝对定位，参照全局坐标系；小写相对定位，参照父容器坐标系
指令和数据间的空格可以省略
同一指令出现多次可以只用一个
注意，’M’处理时，只是移动了画笔， 没有画任何东西。 它也可以在后面给出上同时绘制不连续线。
关于这些语法，开发者需要的并不是全部精通，而是能够看懂即可，其它的都可以交给工具来实现。

这里有一篇 Android vector标签 PathData 画图超详解 详细描述了 SVG 中 path 的绘制

好了概念性的东西说完了，我们来看看

SVG 的使用分2种，一种是静态 SVG 矢量图，就是本文的主角，本章节主要谈论的东西，另一种是 SVG 矢量动画，是SVG 的高级应用，是给静态 SVG 加上objectAnimator 动画，应用的很广泛，是实现 android icon 动态交互的核心做法。

上面的SVG 图大家都看到了，我们就是写一个 xml 的文件，里面承载的标签都是描述如何绘制我们想要的图案的，画布大小，颜色，路径等，然后交给系统去绘制。

现在让我们来看看 SVG 在 andorid 中如何应用，如何兼容5.0以下版本。

SVG 虽然早早就在前端使用了，但是 android 上开始支持 SVG 的使用还是从5.0开始的，在5.0以上系统的使用很简单，和之前一样使用 PNG 图片一样

首先 android 中的 SVG 图片的承载方式是一个 xml 文件，所以UI 给我们的 SVG 图片是不能直接使用的，这里 google 给我们提供加载方式

Android studio 在 2.3.3 的版本中可以直接使用 svg，新建一个 SVGDemo项目，新建 Vector Asset 文件：app-》 main -》 New -》 Vector Asset 如图所示：

我们选择 Local File 就是选择本地svg文件进行导入，对文件命名后点击 Next -》Finish 在 drawable目录 下就添加了一个.xml的文件

好了这样一个 svg 图片我们算是加入到我们的工程里里了，可以直接使用了。当然在此之前我们把 SVG 图片放在那个 drawable 文件夹呢。对于这个问题就要说一下了：

有一点需要解释一下，svg 矢量图文件我们放在drawable 根目录即可。android 系统不会根据你把 svg 矢量图存放在不同的 drawable 文件夹，对图片进行分辨率上的缩放，因此我们不用像使用 PNG 图片时准备多套图片了。我们导入 SVG 图片默认存放的地址就是 drawable根目录，所以我们就放这里就好了，当然也可以自己写SVG 图片，都是 xml 的，自己写完 path 路径后都是可以查看预览的，一般也不会自己写，都是UI 的活。

这样就 ok啦，5.0以上的系统SVG你就像一般 png 图片一样使用就好啦，你可以试一下。

SVG 在 4.x 版本上的兼容根据 SVG 使用范围的变化，配置也是逐步增加的

这时 imageview 就不行了，我们需要使用 AppCompatActivity 或是 AppCompatImageView，这时我们需要导入 V7 包

gradle 需要如下配置：

系统会在 4.x 版本时对 SVG 自动生成相应的 drawable 图，此时 SVG 是没有无限拉伸特性的，gradle 的配置目的是去这个

举个例子：

资源设置不能用 src 了，必须使用 srcCompat ，这时我们能看到图而不是去 SVG 的特性了

这时上面的设置就不够了，我们在 view 所在的 activity 或是全局添加下面的设置

然后这还不够，我们必须给 SVG 图片添加一个容器，比如 selector，这样我们才能正常使用，比如给 textview 设置图片，自定义属性设置图片

这个 vc_halfstart_24dp 就是 SVG 图片

这个我们必须要添加官方的 vectorDrawable 支持库了，最低支持到 23.2.0

这样基本就没啥问题了

SVG 配合自定义 view 的话，就得我们读取 SVG 然后转换成 path 路径来画了，SVG 实质上也是 xml 文件，所以解析 xml 文件的思路也使用，当然还有其他一些 SVG 转 path 的思路

SVG前戏—让你的View多姿多彩 一文中提供了一些思路，大家不妨去看看

转换买家购买的图片素材是哪些

买家购买的图片素材转换方式如下：
1、JPEG：JPEG是一种常见的图像格式,它通常用于在网络上共享和传输照片。如果需要将JPEG转换为其他格式,可以使用Photoshop、GIMP等图像软件,或者使用在线转换工具如Zamzar、Online-Convert等。
2、PNG：PNG是一种支持透明背景的图像格式,通常用于网页设计和图标制作。如果需要将PNG转换为其他格式,可以使用Photoshop、GIMP等图像软件,或者使用在线转换工具如Zamzar、Online-Convert等。
3、EPS：EPS是一种矢量图形格式,通常用于印刷和出版物制作。如果需要将EPS转换为其他格式,可以使用AdobeIllustrator等矢量图形软件,或者使用在线转换工具如Zamzar、Online-Convert等。
4、SVG：SVG是一种基于XML的矢量图形格式,通常用于网页设计和图标制作。如果需要将SVG转换为其他格式,可以使用AdobeIllustrator等矢量图形软件,或者使用在线转换工具如Zamzar、Online-Convert等。需要注意的是,在转换图片素材时,可能会出现图像质量下降、色彩失真等问题,因此需要谨慎选择转换方式和工具。