可缩放矢量图形 SVG


维基百科,自由的百科全书
跳转到: 导航, 搜索
跳过字词转换说明

汉漢▼▲为了阅读方便,本文使用全文手工轉換。转换内容:
本文采用电脑和信息技术组全文转换 [查看] • [编辑] • [强制刷新]

 


顯示↓關閉↑字詞轉換说明
字詞轉換是中文维基的一項自動轉換,目的是通過计算机程序自動消除繁简、地区词等不同用字模式的差異,以達到閱讀方便。字詞轉換包括全局轉換和手動轉換,本說明所使用的标题转换和全文转换技術,都屬於手動轉換。

如果您想对我们的字词转换系统提出一些改进建议,或者提交应用面更广的转换(中文维基百科全站乃至MediaWiki软件),或者报告转换系统的错误,请前往Wikipedia:字词转换请求或候选发表您的意见。

可缩放矢量图形 
扩展名 .svg, .svgz
互联网媒体类型 image/svg+xml[1]
開發者 万维网联盟
格式 矢量图形
延伸自 xml
 
这张图片展示了位图和矢量图的区别。位图是由点构成的,矢量图则是由一些形状元素构成。该图中显示放大位图可以看到点,而放大矢量图看到的仍然是形状。SVG属于矢量图,因此能夠无级縮放,而不會導致馬賽克。可缩放矢量图形(Scalable Vector Graphics,SVG)是基于可扩展标记语言(XML),用于描述二维矢量图形的一种图形格式。SVG由W3C制定,是一个开放标准。

目录 [隐藏]
1 SVG概述
1.1 SVG Basic
1.2 SVG Tiny
2 SVG技术细节
3 标准制定开发历史
4 示例
5 SVG显示
5.1 插件支持
5.2 本地支持
5.3 各种SVG解释器支持程度比较
6 设计工具
7 軟件支援
8 参考资料
9 外部连接
 

[编辑] SVG概述
SVG严格遵从XML语法,并用文本格式的描述性语言来描述图像内容,因此是一种和图像分辨率无关的矢量图形格式。SVG格式具有以下优点:

图像文件可读,易于修改和编辑
与现有技术可以互动融合。例如,SVG技术本身的动态部分(包括时序控制和动画)就是基于SMIL标准。另外,SVG文件还可嵌入JavaScript(严格地说,应该是ECMAScript)脚本来控制SVG对象
SVG图形格式可以方便的建立文字索引,从而实现基于内容的图像搜索
SVG图形格式支持多种滤镜和特殊效果,在不改变图像内容的前提下可以实现位图格式中类似文字阴影的效果
SVG图形格式可以用来动态生成图形。例如,可用SVG动态生成具有交互功能的地图,嵌入网页中,并显示给终端用户
SVG面临的主要问题一个是如何和已经占有重要市场份额的矢量图形格式Adobe Flash竞争的问题,另一个问题就是SVG的本地运行环境下的厂家支持程度。

[编辑] SVG Basic
SVG Basic又称SVGB,是英语「Scalable Vector Graphics, Basic Profile」的简写,可以翻译为「可缩放的矢量图形标准的基本版」。它是SVG的一个子集,而主要目标是为掌上电脑等高端移动设备提供矢量图形显示格式。

[编辑] SVG Tiny
SVG Tiny又称SVGT,是英语「Scalable Vector Graphics, Tiny Profile」的简写,可以翻译为「可缩放的矢量图形标准的微型简化版本」。它也是SVG的一个子集,而主要目标是为手机等低端移动设备提供矢量图形显示格式。

[编辑] SVG技术细节
 
简单SVG图片,样如少女。SVG主要支持以下几种显示对象:

矢量显示对象,基本矢量显示对象包括矩形、圆、椭圆、多边形、直线、任意曲线等
嵌入式外部图像,包括PNG、JPEG、SVG等
文字对象
SVG可以实现动态和交互功能。在DOM模型的基础上,SVG开发设计人员可以利用ECMAScript或者SMIL来进行时序控制或对象的操纵。SVG虽然是文本格式,但是SVG支持利用gzip压缩算法减少文件尺寸,压缩后的文件通常用被称为「SVGZ文件」。

[编辑] 标准制定开发历史
W3C于2001年9月4日发布SVG 1.0。
W3C于2003年1月4日发布SVG 1.1。
W3C于2003年1月14日推出SVG移动子版本:SVG Tiny和SVG Basic。
2008年12月22日,SVG Tiny 1.2成为W3C的推荐标准。
W3C目前正在研究制定SVG 1.2版本。
[编辑] 示例
 
示例SVG顯示如圖SVG格式是XML的一種,SVG文件其實只是普通的文本文件,用一般的文本編輯器便可查看或修改。

<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
    "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
    width="467" height="462">
  <!-- This is the red square: -->
  <rect x="80" y="60" width="250" height="250" rx="20" fill="red"
         stroke="black" stroke-width="2px" />
  <!-- This is the blue square: -->
  <rect x="140" y="120" width="250" height="250" rx="40" fill="blue"
         stroke="black" stroke-width="2px" fill-opacity="0.7" />
</svg>
[编辑] SVG显示
[编辑] 插件支持
目前,最常用的SVG插件来自Adobe公司(Adobe SVG Viewer),另外Corel也提供SVG浏览器(Corel SVG Viewer)。

[编辑] 本地支持
比较著名的 SVG 项目包括 Mozilla SVG Project,KDE 的 KSVG,以及 Amaya 等。
Mozilla Firefox自版本 1.5 发行后,即开始支援 SVG 格式的显示。
基于 Java 的 SVG 项目主要有 Batik SVG Toolkit 等。
Opera、Google Chrome和Safari支持SVG显示。
Microsoft的Internet Explorer至8.0版為止,尚未支援SVG。
[编辑] 各种SVG解释器支持程度比较
W3C的SVG网站上有一个测试套件可以用来测试SVG解释器对于标准的支持。这个套件既可以在线运行也可以下载到本地运行。截至2007年中,对于流行的SVG软件有如下测试结果:

对SVG支持最好的浏览器是Opera,它支持大多数的SVG特性。
对于专门的SVG浏览器,Batik SVG viewer能对大多数特性有良好支持,与Opera不相伯仲。但它不能和浏览器互动。
加载了Adobe SVG Viewer的Internet Explorer也能支持多数SVG特性,但是由于没有浏览器的原生支持,在交互方面许多特性不支持。
Mozilla Firefox 2.0对SVG特性的支持相当弱,许多重要特性如动画等都不能支持。
[编辑] 设计工具
能够设计SVG图形作品的软件工具包括Adobe Illustrator以及CorelDRAW等。

而開放源代碼的軟件有Scribus、Karbon14、Inkscape以及Sodipodi等。

[编辑] 軟件支援
Adobe 公司 SVG 插件 及 Adobe 公司 SVG 应用实例演示
Inkscape 開放源代碼的軟體
Karbon14 開放源代碼的軟體
Sodipodi 開放源代碼的軟體
Mozilla SVG and Mozilla SVG 演示
Firefox 1.5-首個 Firefox 版本開始支援顯示 SVG 格式
Opera 瀏覽器-Opera 8.0 版開始支援顯示 SVG Tiny 1.1 的 spec 規格
[编辑] 参考资料
^ M Media Type registration for image/svg+xml
[编辑] 外部连接
相關的维基共享资源:
可缩放矢量图形 W3C SVG 官方标准网站
svg.org 社群消息网站
svgx.org 新聞及資源網
about-svg.de
svgwiki
SVG Web
Opera開發網站上關于SVG的展示及教程(英文)

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
要修改SVG图形的背景色,可以使用CSS样式。以下是一些方法: 1. 在SVG代码中添加样式属性:可以在SVG代码中添加样式属性来修改背景颜色。例如: ``` <svg width="100" height="100"> <rect x="0" y="0" width="100" height="100" style="fill: #f00;" /> <circle cx="50" cy="50" r="40" /> </svg> ``` 在上面的代码中,我们使用`<rect>`元素创建一个矩,并使用`style`属性将其背景颜色设置为红色。 2. 使用CSS选择器:可以使用CSS选择器来选择SVG元素,并为其添加样式。例如: ``` <style> #background { fill: #f00; } </style> <svg width="100" height="100"> <rect id="background" x="0" y="0" width="100" height="100" /> <circle cx="50" cy="50" r="40" /> </svg> ``` 在上面的代码中,我们使用CSS选择器`#background`来选择`<rect>`元素,并将其背景颜色设置为红色。 3. 使用外部CSS文件:可以将SVG代码保存在一个单独的文件中,并使用外部CSS文件来为其添加样式。例如: ``` <!-- SVG 文件:background.svg --> <svg width="100" height="100"> <rect id="background" x="0" y="0" width="100" height="100" /> <circle cx="50" cy="50" r="40" /> </svg> <!-- CSS 文件:style.css --> #background { fill: #f00; } ``` 在上面的代码中,我们将SVG代码保存在`background.svg`文件中,并将样式保存在`style.css`文件中。通过将`style.css`文件链接到`background.svg`文件中,我们可以为SVG添加样式。 无论使用哪种方法,都可以通过修改`fill`属性来修改SVG元素的背景颜色。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值