SVG矢量图像：微笑

效果图

SVG图片：Happy.svg

<?xml version="1.0" encoding="utf-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/SVG/DTD/svg10.dtd">
<svg viewBox="0 0 400 400" width="100%" height="100%" 
    xmlns="http://www.w3.org/2000/svg">
    <title>IdiotInSvg</title>
    <defs>
        <radialGradient id="tsybius">
            <stop offset="0%" stop-color="black" />
            <stop offset="100%" stop-color="lawngreen" />
        </radialGradient>
    </defs>
    <g id="mainlayer">   
        <rect x="0" y="0" width="400" height="400" fill="lawngreen" />
        <rect x="0" y="40" width="400" height="400" fill="url(#tsybius)" />
        <circle cx="200" cy="200" r="175" stroke="black" 
            stroke-width="1pt" fill="yellow" />
        <circle cx="130" cy="145" r="60" stroke="black" 
            stroke-width="1pt" fill="white" />
        <circle cx="130" cy="170" r="35" stroke="black" 
            stroke-width="1pt" fill="black" />
        <circle cx="270" cy="145" r="60" stroke="black" 
            stroke-width="1pt" fill="white" />
        <circle cx="270" cy="170" r="35" stroke="black" 
            stroke-width="1pt" fill="black" />
        <path 
            d="M 100,250 C 160,320 240,320 300,250" 
            style="fill:none;stroke:#000000;stroke-width:5pt" />
    </g>
</svg>
<!---->

调用页面：Template.htm

<!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>SMILING FACE 2014/11/15</title>
    </head>
    <body align="center">
        <h1>SMILING FACE</h1>
        <iframe src="Happy.svg" width="400" height="400" />
    </body>
</html>

END

时间： 2024-10-02 00:44:08

SVG矢量图像：微笑的相关文章

Html5 SVG矢量图像的使用

SVG中文参考地址 : mozilla.:可缩放矢量图形(Scalable Vector Graphics,SVG)

一:什么是SVG以及的特点 (1)SVG指可伸缩矢量图形(Scalable Vector Graphics) (2)SVG 用来定义用于网络的基于矢量的图形 (3)SVG 使用 XML 格式定义图形 (4)SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失二:SVG之HelloWorld 像学习每一门语言一样,我们来写一个最简单的SVG矢量图.输出一个圆. svg图文件的后缀名为.svg;将上面的代码另存为svg文件,用浏览器打开即可. 几乎所有的浏览器都支持 SVG显示,如果不能显示

Android使用SVG矢量图打造酷炫动效！

尊重原创,欢迎转载,转载请注明: FROM GA_studio http://blog.csdn.net/tianjian4592 一个真正酷炫的动效往往让人虎躯一震,话不多说,咱们先瞅瞅效果: 这个效果我们需要考虑以下几个问题: 1. 这是图片还是文字: 2. 如果是图片该如何拿到图形的边沿线坐标,如果是文字呢? 3. 如果拿到了边沿线坐标,如何让光线沿着路径跑动: 4. 怎么处理过程的衔接: 以上四个问题似乎不是太好处理,而这几个问题也正好是这个效果精华所在,接下来咱们一个一个进行考虑

Android动画机制与使用技巧（五）——Android 5.X SVG 矢量动画机制

Google在Android 5.X 中增加了对SVG 矢量图形的支持,这对于创建新的高效率动画具有非常重大的意义.那首先了解SVG的含义. 可伸缩矢量图形(Scalable Vector Graphics) 定义用于网络的基于矢量的图形使用XML格式定义图形图像在放大或改变尺寸的情况下其图形质量不会有所损失万维网联盟的标准与诸如DOM和XSL之类的W3C标准是一个整体 SVG在Web上的应用非常广泛,在Android 5.X之前的Android版本上,可以通过一些第三方开源库来在And

svg矢量图制作工具(Sketsa SVG Editor) v7.1.1 中文免费版

下载地址:https://www.jb51.net/softs/555253.html Sketsa SVG Editor中文版是一款强大好用的矢量图绘制工具,该工具的最大特色就是集成了中文语言,且支持xml格式,允许用户允许放大或者缩小尺寸到任意分辨率而不会产生失真效果,Sketsa SVG Editor集成了调色板.DOM编辑器.资源编辑器.SVG特定成形工具等实用绘图工具,是您进行矢量图绘制的又一选择,需要此款工具的朋友们可以前来下载使用. 基本介绍 Sketsa SVG Editor 是

svg矢量图

svg简介 Scalable Vector Graphics 可缩放矢量图形 SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失 svg知识点 svg如何绘图 svg和cnavas区别 svg如何实现动画效果 svg应用场景 1.图表 2.图标 icon 3.动效 4.矢量图:由点/线/图形(基本图形) SVG元素开始 <svg width="500px" height="500px"> </svg> 使用 1. 直线 <li

【干货】Xcode 6 技巧: 矢量图像，代码片段以及其他

原文:Xcode 6 Tips: Vector Images, Code Snippets and Many More,译者:yuewang 目录: 一.Creating a Sample Project 二.更换Themes 三.添加自定义字体四.代码片段五.自定义调色板六.使用矢量图七.管理你的源代码八.总结作为一名开发者,无论你是职业的还是为了兴趣,毫无疑问的是你肯定会花无数的时间坐在显示器前等待你的工程完毕.感觉你正在使用的编程工具得心应手非常重要,因为它们是你的虚拟工作空间

SVG矢量图【转】

var iconArray=[ //'circle', //实心圆 //'rect', //矩形 //'roundRect', //圆角矩形 //'triangle', //三角形 //'diamond', //菱形 //'pin', // //'arrow', //箭头 //'path://m1,153l0,-152l146,152l-146,0z', //直角三角形 'path://M100,0 L41.22,180.90 L195.10,69.09 L4.89,69.09 L158.77,

高清屏及适配不同设备的方案总结

关于一些Retina,设备像素,移动适配的知识,网上一搜也是一大把,但是基本的东西并没有变化太多.下面就我看过的一些有关于这方面的知识做一些总结(仅以个人的角度出发,所以有不全的地方还请大家谅解).后面会有不定期的更新~每个知识点我都会在开关写出引用地址,所以大家有不懂的可以看原文章~ 一.关于设备像素比(devicePixelRatio) 出处:高清屏概念解析与检测设备像素比的方法所谓设备像素比(devicePixelRatio)指的就是设备上物理像素和设备独立像素(device-indep