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. PHP编写的SVN类

    <?php /** * SVN 外部命令 类 * * @author rubekid * * @todo comment need addslashes for svn commit * */ ...

  2. 关于JS、JQuery、CSS的小知识点

    1.将字符串转换成json列表格式如下: var getaddress = appcan.libuser.getAddress(); var address=JSON.parse(getaddress ...

  3. c - 2/1, 3/2, 5/3, 8/5, 13/8...前20项的和

    double pres(const int n) { ; //分子. ; //分母. ; double tmp; ; i <= n; i++) { sum += (numerator / den ...

  4. Windows 下 SVN 服务器配置

    1.下载文件,   下载最新版本subversion,我这里选择VisualSVN-Server-2.5.7.exe   2.安装Subversion 服务器   由于我下载的是setup.exe版本 ...

  5. gui界面2048小游戏

    坑的地方 JLabel色块要调透明 方向键要用press方法 主界面 package game; import java.awt.BorderLayout; import java.awt.Event ...

  6. Android环境搭建-Eclipse-Luna

    所需软件:eclipse-jee-luna-R-win32-x86_64 所需插件:Adt 23.02 其他:Android SDK 环境搭建-JDK安装.Eclipse安装 配置安卓环境变量: cm ...

  7. php.ini的中文解释

    [PHP]  ; PHP还是一个不断发展的工具,其功能还在不断地删减  ; 而php.ini的设置更改可以反映出相当的变化,  ; 在使用新的PHP版本前,研究一下php.ini会有好处的 ;;;;; ...

  8. dede 删除栏目文章后, 让ID从1开始

    1)删除所有栏目,新建ID从1开始: ALTER TABLE `dede_arctype` AUTO_INCREMENT =1; 2)删除所有文章,新发布文章ID从1开始: ALTER TABLE ` ...

  9. php错误处理和php异常处理机制

    php错误处理  当我们开发程序时,有时候程序出现了问题,我们就可以用以下几种办法找出错误.  开发阶段:开发时输出所有的错误报告,有利于我们进行程序调试  运行阶段:我们不要让程序输出任何一种错误报 ...

  10. Qt中如何固定窗口的大小?

    这个是从网上转载过来的,我第一次看到的在如下网页:http://blog.csdn.net/cgb0210/article/details/5712980  这里我记录一下,留以后查阅. 一种方法是设 ...