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. js接收复选框的值

    <td><input type="checkbox" class="title" name="title" value=& ...

  2. linux的exec命令

    linux的exec命令可以多进程执行,如果在浏览器访问使用http协议,会存在内存溢出和执行时间问题.

  3. 使用URL读取网络图片资源

    URL(Uniform Resource Locator) 对象代表统一资源定位器. 代码如下: public class MainActivity extends ActionBarActivity ...

  4. Cacti添加IO模板并监控磁盘IO

    1.下载Cacti_Net-SNMP_DevIO_v3.1.zip 下载Cacti_Net-SNMP_DevIO_v3.1.zip,解压并上传net-snmp_devio.xml到/resource/ ...

  5. Spring静态属性注入

    今天遇到一个工具类,需要静态注入一个属性,方法如下: 第一步:属性的set和get方法不要加static package cn.com.chinalife.ebusiness.common.util; ...

  6. sql查询语句心得

    1)where 有多个用in ,一个用= 2)自身链接 select A.Sno from S A,S B where A.Sname='a' AND A.City=B.City)) 3)外链接(同时 ...

  7. Extjs中grid表头内容居中

    在每一列中加上header属性即可,源码: header:'<div style=" text-align: center; vertical-align: middle;" ...

  8. PHPCMS 插件开发教程及经验谈

    虽说 PHPCMS 开源,但其它开发文档及参考资料实在少得可怜.进行二次开发时,自己还得慢慢去研究它的代码,实在让人郁闷. PHPCMS 的“Baibu/Google地图”实在有待改进,对于数据量比较 ...

  9. 兄弟连面试宝典php

    学历这个事情是企业招聘经常设置的一道门槛,我们不能说学历高就能力高,也不能说学历低能力就差,那如何辩证回答这个问题呢?回答提示:学历不一定完全代表能力,虽然我的学历不够硬但是我会在技术上更努力更认真, ...

  10. FSG1.33解压缩算法分析

    之前只是知道怎样脱去fsg壳,对壳的压缩算法没有太多的注意,今天就对算法进行一些分析 使用的版本是fsg1.33,首先用peid查壳: 2.将程序载入OD,看到如下代码 可以看到这段代码主要是从以es ...