
SVG可缩放矢量图形(ScalableVector Graphics)。与我们常用的jpeg、png格式的位图格式不同,这种格式的图片在放大达到一定的倍数之后,就能看到一个个的小方块,图片整体在视觉上就模糊了,SVG格式的图片无论放大缩小都可以保证清晰度不变。
那么SVG有哪些特点呢?
1. 基于SVG的图像尺寸不限于固定的大小,可以升级到不同的现实分辨率。
2. 同一段SVG内容可以被灵活的运用在其它SVG图像中。
3. 动态交互性,利用dom的接口编程可实现响应各种高亮,声效,特效动画操作等,SVG定义了丰富的事件,可以满足动画效果的需求。
4. 文本的独立性,SVG图像中的文字独立于图像,可以被独立操作,以及被搜索引擎读取。
5. SVG具备1600万色彩的调色板,支持ICC标准,RGB,线性填充和遮罩。
6. SVG是基于XML的纯文本格式,通过XML传递数据,不受空间,设备,平台的限制。
SVG的应用
Svg提供了基本的图形元素,如线段,矩形,椭圆,折线等通过路径元素表现出来,基于坐标系统进行平移,伸缩,旋转等变化,通过色彩填充及滤镜对图片进行加工。并使用svg特有的动画标签实现动画效果。
实例介绍
<svg width="100%"height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradientid="grey_blue" cx="50%" cy="50%"r="50%"
fx="50%" fy="50%">
<stop offset="0%"style="stop-color:rgb(200,200,200);
stop-opacity:0"/>
<stop offset="100%"style="stop-color:rgb(0,0,255);
stop-opacity:1"/>
</radialGradient>
</defs>
<ellipse cx="230"cy="200" rx="110" ry="100"
style="fill:url(#grey_blue)"/>
</svg>
代码图片效果:
图片
上面这段代码的意思就是定义一个svg画布宽高为100%,画一个一定规格的椭圆,由椭圆中心点开始一个放射性的渐变,并进行图片透明度的处理。
Svg图片除了用代码的形式进行编辑外,还可以使用绘图工具Adobe Illustrator 作图。因为其清晰度在放大缩小的情况下可以自适应,所以特别适合做响应式的配图,其动画效果也很好的满足了游戏开发的需求。
我们在微信上24小时期待您的声音
解答:网站建设、APP开发、小程序开发
网联科技是一家以提供网站建设、APP、小程序开发、CRM系统开发为主的互联网开发公司。以客户需求为导向,客户利益为出发点,结合自身设计及专业建站优势,为客户提供从基础建设到营销推广的一整套解决方案,探索并实现客户商业价值较大化,为所有谋求发展的企业贡献全部力量。