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. SQL查询表字段、字段说明、类型、长度、主键

    SELECT  表名=d.name,case when a.colorder=1 then d.name else '' end, 字段序号=a.colorder, 字段名=a.name, 标识=ca ...

  2. 修复 status 为 unusable 的 index

    以DBA权限登陆,执行以下脚本即可. declare     -- 指向所有 UNUSABLE 状态的 index 的游标      cursor c is        select index_n ...

  3. Entity Framework 的事务

    一个db.SaveChanges()相当于一个事务,多个db.SaveChanges()保证操作完整性则需要使用事务 在Entity Framework 中使用事务,事务只会对数据库操作进行回滚,不会 ...

  4. 自动加载类PHP中spl_autoload_register函数的用法

    spl_autoload_register(PHP 5 >= 5.1.2) spl_autoload_register — 注册__autoload()函数 说明bool spl_autoloa ...

  5. java制作简单的坦克大战

    坦克大战是我们小时候玩红白机时代的经典游戏,看到有不少小伙伴都使用各种语言实现了一下,手痒痒,也使用java做的一个比较简单的坦克大战,主要面向于学过Java的人群,与学了一段时间的人,有利于面向对象 ...

  6. query等待ajax执行完毕再继续执行下面代码的操作

    Jquery等待ajax执行完毕再继续执行下面代码的效果,具体代码如下,其实就是将 jquery ajax 函数的 async 参数设置为 false 即可,该参数默认为 true: $(docume ...

  7. 使用Jstl异常:The absolute uri: http://java.sun.com/jsp/jstl/core cannot&nbs

    错误提示是:        org.apache.jasper.JasperException: This absolute uri http://java.sun.com/jsp/jstl/core ...

  8. Unity3D 经验记录

    1.using UnityEngine.SceneManagement; 当在01场景调用02场景时,再载入回01场景时,代码保存的变量不会初始化,预制物体脚本内的变量会初始化. 2.当子物体太多时, ...

  9. android ConnectivityManager 检查是否有网络

    一.   ConnectivityManager 概要 ConnectivityManager是网络连接相关的管理器,它主要用于查询网络状态并在网络发生改变时发出状态变化通知.这个类主要负责的下列四个 ...

  10. C++统计代码注释行数 & 有效代码行数 & 代码注释公共行 & 函数个数

    问题来源,在14年的暑假的一次小项目当中遇到了一个这样的问题,要求统计C++代码的注释行数,有效代码行数,代码注释公共行数,以及函数个数. 下面稍微解释一下问题, 1)注释行数:指有注释的行,包括有代 ...