SVG入门

news/2024/7/19 10:12:20 标签: Flash, JavaScript, Adobe, XML, 嵌入式
资源:www.chinasvg.com

0. 传统图形图像的缺点:
只读、文件较大、不同设备上显示效果不同

矢量图形规范->SVG(W3C)/可扩展矢量图形规范(Scalable Vector Graphics)
<由于是矢量的,不象PNG、JPEG等逐像素描述,因此文件更小、下载更快>
不但支持矢量还支持矢量/栅格混合图形的描述

SVG目前的缺点:
客户端Browser需要安装Adobe的SVGViewer(如果是IE的话),FireFox1.5已经集成;

1. 什么是SVG
Scalable Vector Graphics(简称SVG),是“可扩展矢量图形”的意思。
SVG是由W3C制定的基于可扩展标记语言(XML)来描述二维矢量图型的一个开放标准。
SVG严格遵从XML语法,SVG并用文本格式的描述性语言来描述图像内容,因此SVG是一种和图像分辨率无关的矢量图形格式。

Keywords:XML文本格式描述图像

2. SVG的强大功能:
SVG使你设计的网页可以更加精彩细致,使用简单的文本命令,SVG可实现色彩线性变化、路径、自定义字体、透明效果、滤镜效果等各式常见的图形图像效果。

3. SVG的优点:
Keywords: 矢量的 可编辑压缩缩放 Web融合(动态) 数字地图 搜索 Flash

SVG是纯XML的,是一个开发标准。SVG不属于任何个体的专利,而是工业标准,通过协作共同开发的标准。因此SVG能够得到更迅速的开发和应用;

SVG的图像文件可读,易于修改和编辑;
SVG文件比JPEG和GIF更小压缩比更大;
SVG是可以压缩的;
SVG图像是可以任意无损缩放,并以任何分辨率高清晰打印;

SVG与现有的WEB技术可以互相融合(如与HTML、GIF、JPEG、PNG、SMIL、ASP、JSP集成)。SVG的动态部分(包括时序控制和动画就是基于SMIL标准)。SVG文件还可嵌入JavaScript脚本来控制SVG对象;
SVG图形格式可以用来动态生成图形。SVG动态生成具有交互功能的地图,嵌入网页中,并显示给终端用户;
SVG里的文字是可供选择和搜索的,所以SVG图形格式可以方便的建立文字索引,从而让SVG实现基于内容的图像搜索;(参看精彩示例Adobe公司的 Visual Building Search)
SVG图形格式支持多种滤镜和特殊效果,SVG在不改变图像内容的前提下可以实现位图格式中类似文字阴影的效果;
SVG面临的主要问题是与非开放式的Flash如何竞争以及SVG的本地运行环境的厂家支持程度。

FlashFlash 可以使用画布对象和 JavaScript 代码绘制任何图像。还能够从服务器上直接以 XMLJavaScript Serialized Object Notation (JSON) 的形式把数据读入到图像中。)

5. SVG规范:
图形、文字和图像的有机统一

6.SVG应用示例:
a) SVG文件潜入到HTML页面中,
<embed src="start.svg" height="300" width="300" type="image/svg+xml"
pluginspage="http://www.adobe.com/svg/viewer/install/"
style="border: 1px solid black; padding:5px;"/>
b) 定义一个SVG文件:
start.svg
<? xmlversion="1.0"standalone="no" ?>
<! DOCTYPEsvgPUBLIC"-//W3C//DTDSVG1.0//EN""http://www.w3.org/TR/SVG/DTD/svg10.dtd" >
< svg style ="shape-rendering:geometricPrecision;"
viewBox
="00100100" xml:space ="preserve"
xmlns:xlink
="http://www.w3.org/1999/xlink"
xmlns
="http://www.w3.org/2000/svg"
preserveAspectRatio
="xMidYMidmeet" >
< path fill-rule ="nonzero"
style
="fill:#000000;stroke:#FF0000;"
d
="M00L100100Z" />
< path fill-rule ="nonzero"
style
="fill:#000000;stroke:#00FF00;"
d
="M500L50100Z" />
< path fill-rule ="nonzero"
style
="fill:#000000;stroke:#FF0000;"
d
="M0100L1000Z" />
< path fill-rule ="nonzero"
style
="fill:#000000;stroke:#00FF00;"
d
="M050L10050Z" />
</ svg >




http://www.niftyadmin.cn/n/601834.html

相关文章

hive连接mysql之疯狂踩坑

这次真的是非常吐血&#xff0c;虽然网上有很多排错教程&#xff0c;但介于我踩的坑实在太多&#xff0c;所以记录一下整个汇总信息 故事要从hive启动开始&#xff0c;如果你的hive启动不起来&#xff0c; 是因为你的$HADOOP_HOME/etc/hadoop/hadoop-env.sh 当中的HADOOP_CLAS…

XSL入门

1.什么是XSL&#xff1f; XSL(EXtensible Stylesheet Language)可扩展样式表语言XSL之于 XML 就像 CSS 之于 HTML (由于XML中的Tag可以由用户来自定义&#xff0c;而XML文档通常只是树形结构而没有格式化的输出&#xff0c;因此需要XSL来定义XML格式化输出)2.XSL 包含两个部分&…

Spring 基于Java的Bean声明

Spring 基于Java的Bean声明 使用Configuration进行设置&#xff1b; Xml&#xff1a; <?xml version"1.0" encoding"UTF-8"?> <beans xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance" xmlns"http://www.springframework.…

XSL教程1

跟我学XSL&#xff08;一&#xff09; 随着Internet的发展&#xff0c;越来越多的信息进入互联网&#xff0c;信息的交换、检索、保存及再利用等迫切的需求使HTML这种最常用的标记语言已越来越捉襟见肘。 HTML将数据内容与表现融为一体&#xff0c;可修改性、数据可检索性差&am…

软件项目中各角色的心理分析

“软件业&#xff0c;以人为本”。参与软件开发过程的各类人员的共通心理表现&#xff0c;对整个开发过程起着举足轻重的影响。作为一名项目管理者&#xff0c;非常有必要对其进行一一剖析&#xff0c;找出心结&#xff0c;然后对症下药&#xff0c;加大沟通力度&#xff0c;提…

【手把手机器学习入门到放弃】从线性回归开始

终于开新坑了&#xff5e; 线性回归是指将数据拟合成 ya1x1a2x2a3x3...anxnbϵya_1x_1a_2x_2a_3x_3...a_nx_nb \epsilonya1​x1​a2​x2​a3​x3​...an​xn​bϵ的形式 通过训练模型获得参数 a1,a2,...,an,ba_1, a_2, ..., a_n, ba1​,a2​,...,an​,b 从而对新的x值&#x…

HBase API 详细例子(封装的DAO类)

HBase中没有库的概念HBase lib目录下所有JAR包复制到项目中,Hbase 版本0.98.5package com.zxing.imgQRCode;import java.io.IOException; import java.util.LinkedList; import java.util.List;import org.apache.hadoop.conf.Configuration; import org.apache.hadoop.hbase.H…

sqoop: mysql导入数据到hdfs, hive, hbase

mysql 导入 hdfs #启动hadoop $ start-dfs.sh $ start-yarn.sh $ jps 2706 NameNode 3334 ResourceManager 3495 NodeManager 3112 SecondaryNameNode 3848 Jps 2873 DataNode# sqoop energydata是数据库名&#xff0c;average_price_by_state是表名 $ sqoop import --connec…