如何将svg转成jpg python svg怎么转换成jpg

 

在这篇技巧文章中，Benoit Marchal 讨论了可缩放矢量图形（Scalable Vector Graphics，SVG）的编程方法。除非 SVG 浏览器像 Macromedia Flash 播放器 一样得到广泛应用，否则人们很难将 SVG 图像直接集成在 Web 站点上。在这段时间内，Web 开发人员可以通过 SVG 生成 JPEG 以及其他的位图文件。SVG 是纯粹的 XML，因此特别有用。

　　可缩放 矢量图形（Scalable Vector Graphics，SVG）是由 W3C 开发的一种图像格式。因为它是基于 XML 的，所以您可以通过样式表和其他 XML 脚本生成图形。SVG 对于 Web 开发人员以及 Web 站点管理员来说是十分有价值的工具。在这篇技巧文章中，我将向您展示如何用 SVG 自动生成图像，例如，根据统计数据生成统计图。 

SVG 是什么？ 

　　SVG 是一种 XML 词汇表，用于描述 矢量图像。图像分为两类： 位图和 矢量图。位图（如 JPEG、GIF或者 PNG 文件）通过像素网格表示一幅图像。矢量图（SVG 或 Macromedia Flash）通过基本的形状来描述图像，例如圆形、矩形、直线、曲线等等。Adobe Photoshop 是位图编辑器，而 Adobe Illustrator 则是矢量图像编辑器。 

　　位图的文件更大，缩放时也更难做到不损失图像质量。假设有一幅图像，上面是一个直径为 50 个像素的圆形。那么对应于位图的尺寸必须至少有 50 x 50 个像素，也就是 2,500 个像素。如果这个圆形的直径是 100 像素，那么这个位图的尺寸就达到了 100 x 100 像素，足足增大了四倍（即 10,000 个像素）。JPEG、GIF 和 PNG 文件都通过压缩的方式减少文件大小。然而压缩带来的帮助是有限度的，位图依然比矢量图形大很多。

　　事实上，与这幅图对应的矢量图形只有一条指令：“绘制一个直径为 50 像素的圆形。”更进一步说，如果圆形变大，存储它的文件并不会更大（只是变成了“绘制一个直径为 100 像素的圆形。”）不过并不是每一幅图像都能够分解成基本的形状，比如说对于照片，这种方法就无能为力了。因此位图的地位依然很重要，但是对于那些可以分解成基本形状的图像，比如图表、标志、和化学公式等等，矢量文件格式天生就具有较高的效率。

　　放大或者缩小一幅位图，将会损失掉图像的质量。事实上当您将像素网格的直径扩大两倍，您获得的像素数量就是原来的四倍，因此您需要将图像外推四分之三！反过来讲，要将矢量图像放大两倍，您只需要绘制更大的形状就可以了。

　　现在，Web 上最流行的矢量格式是 Macromedia Flash。这是一种很了不起的格式，许多厂商都支持它，但是这种工具也存在所有权的问题。SVG 是一种新的标准，它由 W3C 开发，意在提供 Flash 之外的另一种选择。

　　Web 设计社区关于用 SVG 取代 Flash 的讨论已经进行了很多次了。大家主要关心的问题是，现在是 97% 的 PC 用户都可以使用 Flash，但是 SVG 却还没有那么流行。不过事情总是可以变化的，既然 SVG 是一项标准，那么最终浏览器还是会支持它的，不过要想让它和 Flash 一样流行，可能还需要若干年。

无头部图形 

　　Batik 要用 Graphics2D 才能生成图像。这是处理 2D 图形的标准 Java API，这一点对于 UNIX 或是 Linux Web 服务器来说可能会有问题。因为 Graphics2D 需要有 X11 服务器才能运行，而 Web 服务器上很少会有 X11。从 JDK 1.4 开始，您可以通过将 java.awt.headless 属性设置为 true ，运行所谓的 无头部应用程序。请注意，JDK 依然还会链接到 X11 库，但是已经没有必要启动 服务器了。您可以在命令行中直接设置这一属性： 

java -Djava.awt.headless=true 
-jar batik-rasterizer.jar chart.svg

用程序检验效果 

　　即使 SVG 的可用性目前还不如 Flash，但是应用 SVG 还是会带来一些好处。SVG 吸引人的特点之一就是，它是一种 XML 词汇表，因此可以很方便的用我们熟悉的工具，如 XML 解析器、脚本、XSL 样式表等，来处理 SVG。为了解决缺乏浏览器的支持这一问题，我们可以将 SVG 图像转换成广泛支持的格式，比如 GIF 或是 JPEG。

　　Apache 为我们提供了一种开放源代码的 SVG 渲染工具，名叫 Batik（参阅 参考资料）。Batik 具有很多不同的功能，如图像浏览器、创建图像的工具、以及光栅化程序（rasterizer）。我最感兴趣的是光栅化程序，因为它可以将 SVG 文件转换成位图。 

　　话说得已经够多了，现在要开始编写代码了。清单 1 是一段 Python 脚本，可以根据一组数据创建条形图。请注意，您不一定非得用 Python 才能实现本篇技巧文章中的任务，Perl、Javascript、Java 语言以及最重要的 XSL 样式表都能够等效完成工作。关键问题在于，既然 SVG 文件是 XML，那么任何 XML 工具都应该适用。

　　清单 

1. printsvg.py

from sys import stdin

def read_data():
data = []
line = stdin.readline()
while line != ' ' and line != '':
data.append(line.split())
line = stdin.readline()
return data

def print_bars(data):
position = 0
for i in data:
height = int(i[1]) * 2
if height > 200:
height = 200
print '  
  < 
  rect  
  x 
  ="%(x)i" 
   y 
  ="%(y)i" 
   width 
  ="30" 
   
height 
  ="%(height)i" 
  /> 
  ' % { 'x': position * 40 + 10, 
'y': 200 - height, 'height': height }
print '  
  < 
  text  
  x 
  ="%(x)i" 
   y 
  ="215" 
  > 
  %(text)s
 
  </ 
  text 
  > 
  ' % { 'text': i[0], 'x' : position * 40 + 20 }
position += 1
return

def print_svg(data):
print u' 
  <? 
  xml version="1.0" 
  ?> 
   
 
  < 
  svg  
  xmlns 
  ="http://www.w3.org/2000/svg" 
   
  id 
  ="body" 
   
  width 
  ="%(width)i" 
   
  height 
  ="220" 
   
  viewBox 
  ="0 0 %(width)i 220" 
  > 
   
   
  < 
  polyline  
  style 
  ="stroke:black; fill:none" 
   id 
  ="axis" 
   
points 
  ="0,0 0,200 %(width)i,200" 
  /> 
   
   
  < 
  g  
  id 
  ="boxes" 
   style 
  ="stroke:black; fill:green; 
text-anchor: middle" 
  > 
  ' % { 'width': len(data) * 40 + 10 }
print_bars(data)
print '  
  </ 
  g 
  > 
   
 
  </ 
  svg 
  > 
  '
return

if __name__ == "__main__":
print_svg(read_data())

　　在 清单 1 中，我的条形图还是比较简单的。首先，这段脚本绘制出坐标轴，然后，循环处理数据，用矩形绘制出条状。它同时还绘制出文本，作为条形的标签。对图形进行改进也不是很困难，您可以用 3D 效果绘制条形。或是使用不同的颜色。如果您希望了解更多有关 SVG 基本形状的知识，请参看 developerWorks中的教程（参阅 参考资料）。 

　　这段脚本是一个过滤器，因此它要从标准输入设备上获得输入数据，然后将处理结果写到标准输出设备上。它希望数据分行表示，每一行有两部分数据——行标签和百分比。您可以用重定向操作符来处理文件，如下所示：

python printsvg.py  
  < 
   data 
  .txt  
  > 
   chart.svg

　　清单 2 是一个数据集的例子。显然，您可以在瞬间生成大量图形，只要给脚本指定不同的数据集就可以了。这对于统计应用来说是很有用的。

　　清单 2. data.txt

Jan. 43
Feb. 34
Mar. 98
Apr. 29
May 52
Jun. 33
Jul. 15
Aug. 11
Sep. 65
Oct. 78
Nov. 98
Dec. 87

　　如果要将 SVG 图像转换成更加常用的格式，您可以安装 Batik 的光栅化程序（参阅 参考资料），然后发出下面的命令： 

java -jar batik-rasterizer.jar chart.svg

　　用 清单 2 中的数据运行 清单 1 中的脚本，您最终将得到如图 1 所示的图像： 

　　图 1. 条形图示例

　　默认条件下，光栅化程序生成的是 PNG 文件，如果您想要创建 JPEG 文件，可以使用下面的命令：

java -jar batik-rasterizer.jar -m image/jpeg -q 0.8 chart.svg

　　-m 代表图像的 MIME 类型， -q 表示 JPEG 的质量因子（介于 0 和 1 之间的数字）。

话题的引伸 

　　使用 SVG 和 Batik 工具箱带来的主要好处是，您可以通过 XML 生成图像，每一种 XML 工具，包括脚本与样式表，现在都可以用来产生 Web 图像了。

　　我解释了如何生成条形图，相同的技术也适用于其他的图形，如导航按钮、技术图纸、UML 模型等。请注意，您的脚本是没必要生成全部图像的。假使要导入用 Adobe Illustrator 之类的图像编辑器创建的标志或者其他图像，您可以采用下面的步骤：

　　在图像编辑器中，将图像保存为 SVG。 

在脚本中，插入下面的指令： 

< use  xlink:href ="logo.svg" />  

有了 Batik 光栅化程序和颇具灵活性的 XML， 您将发现 SVG 真的是所向披靡。

参考资料 

　　您可以参阅本文在 developerWorks 全球站点上的 英文原文. 

　　请下载本文用到的 Batik toolkit。这里面包括了光栅化程序，可以将 SVG 文件转换成位图。 

　　请阅读 Nicholas Chase 撰写的 developerWorks教程“ 伸缩向量图形介绍”（2002 年 2 月），从中可以了解本文所讨论技术的优点和缺点。 

　　可以从“ 交互式动态可伸缩向量图形”（ developerWorks，2003 年）中学到有关 SVG 的更高级特性。 

　　请访问 Adobe SVG Zone，这里是开始学习 SVG 的好地方。里面可以下载 SVG 浏览器（让您的浏览器可以显示 SVG）、演示和教程。 

　　请到 developerWorks XML 专区上查找更多的 XML 资料。要获得到目前为止的所有 XML 技巧文章，请访问 技巧汇总页面。 

　　IBM 的 DB2 数据库不仅支持关系数据库存储，还提供与 XML 有关的工具，比如可作为 XML 与关系系统之间桥梁的 DB2 XML Extender。要学习有关 DB2 的更多知识，请访问 DB2 开发者园地。 

　　了解如何成为一名 IBM 认证的 XML 及相关技术的开发人员。

关于作者 

　　

　　Benoit Marchal, 顾问, Pineapplesoft

　　Benoit Marchal 是一名来自比利时的顾问。他是 XML by Example, Second Edition 一书以及其他几本 XML 书籍的作者。Benoit 能够为您的 XML 项目提供帮助。可以通过 [e-mail] [e-mail] This email address is being protected from spam bots, you need Javascript enabled to view it 或者他的个人主页 marchal.com 与 Benoit 取得联系。

(本文结束)