Just like create html page, you can create a svg tag by:

<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" height="340" width="340" style="background-color:#F6F7F7;"> </svg>

Inside svg,

  • x,y:  control the position of element
  • fill: control the color of element
  • height, width: you know

Simple example by rect tag:

<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" height="340" width="340" style="background-color:#F6F7F7;">
<!-- Chimney -->
<rect height="21" width="14" fill="#FBF6A7" x="98" y="127"/>
<rect height="4" width="20" fill="#E04E27" x="95" y="123"/> <!-- House -->
<rect height="84" width="162" fill="#FBF6A7" x="90" y="198"/>
<rect height="56" width="184" fill="#E04E27" x="80" y="148"/> <!-- Door -->
<rect height="60" width="36" fill="#E04E27" x="153" y="222"/>
<!-- Door handler -->
<rect height="8" width="2" fill="#FBF6A7" x="183" y="252"/>
</svg>

[SVG] Simple introduce for SVG的更多相关文章

  1. 突袭HTML5之SVG 2D入门1 - SVG综述////////////////zzzzzzzz

    以二次贝塞尔曲线的公式为例: js函数: //p0.p1.p2三个点,其中p0为起点,p2为终点,p1为控制点 //它们的坐标用数组表示[x,y] //t的范围是0-1 function qBerzi ...

  2. SVG 2D入门13 - svg对决canvas

    到目前为止,SVG与Canvas的主要特性均已经总结完毕了.它们都是HTML5中支持的2D图形展示技术,而且均支持向量图形.现在,我们就来比对一下这两种技术,分析一下它们的长处和适用场景.首先分析一下 ...

  3. SVG 2D入门1 - SVG综述

    位图与矢量图 以前,浏览器中显示的图形,例如jpeg.gif等,都是位图,这些图像格式是基于光栅的.在光栅图像中,图像文件定义了图像中每个像素的颜色值.浏览器需要读取这些值并做出相应行动.这种图像的再 ...

  4. HTML5 Canvas、内联 SVG、Canvas vs. SVG

    canvas 元素用于在网页上绘制图形. 什么是 Canvas? HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. canv ...

  5. SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组

    目录 SVG 学习<一>基础图形及线段 SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组 SVG 学习<三>渐变 SVG 学习<四 ...

  6. SVG系列教程:SVG简介与嵌入HTML页面的方式

    地址:http://www.w3cplus.com/html5/svg-introduction-and-embedded-html-page.html 随着技术向前的推进,SVG相关的讨论也越渐频繁 ...

  7. react使用引入svg的icon;svg图形制作

    由于手头的icon有限,需要使用更多的图标,就得找外援: 1.react安装icon插件,使用插件里已经有的图标 https://react-icons.netlify.com/#/ React Ic ...

  8. SVG Sprite 入门(SVG图标解决方案)

    关于浏览器图标解决方案,一直就有很多 CSS Sprite,Icon Font,CSS Icon以及SVG.相对而言svg矢量图标以及支持浏览器自身解析的优点,很多团队都已经在使用了.这篇文章主要说明 ...

  9. [翻译svg教程]Path元素 svg中最神奇的元素!

    先看一个实例 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999 ...

随机推荐

  1. VC Windows系统服务创建代码

    Windows系统服务创建步骤,常用类封装,废话不多说,直接上代码 // ServceDemo.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" ...

  2. C#数组的使用

    //计算数组中最大值,最小值,平均值和总和 //类中main最先执行 static void Main(string[] args) { //声明一个数组,数组长度一定固定就不能更改了 , , , , ...

  3. Knockoutjs官网翻译系列(四) computed中依赖追踪是如何工作的

    初学者无需了解这些 ,但是很多高级程序员想知道我们为什么可以保持跟踪这些依赖以及可以正确的更新到UI中.它其实很简单.跟踪算法是这样的: 无论何时你定义了一个computed observable,K ...

  4. python MySQLdb、socket与进线程

    1 centos下 安装MySQLdb模块 a 首先需要先安装 setuptool b yum install -y mysql_devel 头文件 c yum install -y python_d ...

  5. PreparedStatement 和 Statment区别

    PreparedStatement vs Statment 1)语法不同:PreparedStatement可以使用预编译的sql,而Statment只能使用静态的sql 2)效率不同: Prepar ...

  6. 利用libpcap抓取QQ号码信息

    最近想在QQ登录时把QQ号码信息记录下来,百度了很多都没有找到具体方式,最近用Wireshark分析报文+libpcap库嗅探实现了这个小功能. 通讯背景: QQ客户端在通讯时使用UDP协议,其中数据 ...

  7. Linux前传——第一次写技术博客

    准备写技术博客了.不过,真的没什么技术,以后就写写学习上面遇到的问题与想法吧.

  8. jQueryMobile之Popup

    效果: (1):Tooltip (2):Menu (3):NestedMenu (4):Login ------ 源码: <!DOCTYPE html> <html lang=&qu ...

  9. ural 1215 Exactness of Projectile Hit

    #include <cstdio> #include <cstring> #include <cmath> #include <algorithm> # ...

  10. 求四百万以内Fibonacci(number)数列偶数结果的总和

    又对啦...开心~~~~ 只是代码可能不符合PEP标准什么的... Each new term in the Fibonacci sequence is generated by adding the ...