SVG简介

SVG 是一种基于 XML 语法的图像格式，全称是可缩放矢量图（Scalable Vector Graphics）。其他图像格式都是基于像素处理的，SVG 则是属于对图像的形状描述，所以它本质上是文本文件，体积较小，且不管放大多少倍都不会失真。

浏览器支持情况

SVG使用方式（源码在lz的github上SVG）

浏览器直接打开

在html中使用img标签引入

        <h1>Hello SVG with &lt;img&gt;</h1>

        <p><img src="simple.svg" />原始大小</p>

        <p><img src="simple.svg"

            width="50" height="50" />50 x 50</p>

        <p><img src="simple.svg"

            width="400" height="400" />400 x 400</p>

直接在html中使用SVG标签

        <p>

            <svg xmlns="http://www.w3.org/2000/svg"

                width="200" height="200">

                <!--Face-->

                <circle cx="100" cy="100" r="90" fill="#39F" />

                <!--Eyes-->

                <circle cx="70" cy="80" r="20" fill="white" />

                <circle cx="130" cy="80" r="20" fill="white" />

                <circle cx="65" cy="75" r="10" fill="black" />

                <circle cx="125" cy="75" r="10" fill="black"/>

                <!--Smile-->

                <path d="M 50 140 A 60 60 0 0 0 150 140"

                    stroke="white" stroke-width="3" fill="none" />

            </svg>

        </p>

作为CSS背景

<!DOCTYPE html>

<html>

    <head>

        <title>在网页中直接使用 SVG 标签</title>

        <style>

            body {

                background: #EFEFEF;

            }

            #bg {

                width: 400px;

                height: 400px;

                background: white url(simple.svg) repeat;

                box-shadow: rgba(0,0,0,.5) 2px 3px 10px;

                border-radius: 10px;

            }

        </style>

    </head>

    <body>

        <h1>Hello SVG with CSS</h1>

        <div id="bg">

        </div>

    </body>

</html>

SVG初尝试(一)的更多相关文章

  1. SVG初尝试(二)

    基本图形 rect(矩形).circle.ellipse(椭圆).line(直线).polyline(折线).polygon(多边形).path(可以绘制任意图形) rect x,y定义矩形坐标,矩形 ...

  2. SVG初尝试之path

    命令汇总 命令基本规律 移动和直线命令 弧线命令

  3. R语言爬虫初尝试-基于RVEST包学习

    注意:这文章是2月份写的,拉勾网早改版了,代码已经失效了,大家意思意思就好,主要看代码的使用方法吧.. 最近一直在用且有维护的另一个爬虫是KINDLE 特价书爬虫,blog地址见此: http://w ...

  4. SQLSERVER2012里的扩展事件初尝试（下）

    SQLSERVER2012里的扩展事件初尝试(下) SQLSERVER2012里的扩展事件初尝试(上) 我们继续文章扩展事件在Denali CTP3里的新UI(二)里的这个实验 脚本文件下载:http ...

  5. SQLSERVER2012里的扩展事件初尝试（上）

    SQLSERVER2012里的扩展事件初尝试(上) SQLSERVER2012里的扩展事件初尝试(下) 周未看了这两篇文章: 扩展事件在Denali CTP3里的新UI(一) 扩展事件在Denali ...

  6. HTML入门——互动式推送初尝试

    0.背景 疫情原因,导致许多大众喜闻乐见的体育活动停摆,但博主和队友们运营的体育社团公众号不能停摆.为了利用当下线上活动频率高的契机增加关注量,加之微信推送的互动性已成为趋势,博主打算和队友们尝试实现 ...

  7. codefirst初尝试

    Code First 约定 借助 CodeFirst,可通过使用 C# 或Visual Basic .NET 类来描述模型.模型的基本形状可通过约定来检测.约定是规则集,用于在使用 Code Firs ...

  8. 中文编程语言之Z语言初尝试: ZLOGO 4

    原文: https://zhuanlan.zhihu.com/p/31505895. 作者为本人. @TKT2016 开发的Z语言(ZLOGO是它的一个部分)是本人至今看到的唯一一个仍活跃开发的开源且 ...

  9. 2017-12-24 手机编程环境初尝试-用AIDE开发Android应用

    前不久才接触到纯粹用手机进行编程的开发者, 当时颇有孤陋寡闻之感, 因为之前听说过手机编程还是一些在线编程学习网站开发的学习环境, 没有想过真的有用它做实际开发的. 此文用AIDE免费版在自己的手机上 ...

随机推荐

  1. Nginx+rtmp+ffmpeg 搭建推流服务器

    1. 安装nginx服务器 1.1 clone $ brew tap denji/homebrew-nginx 1.2 安装 $ brew install nginx-full --with-rtmp ...

  2. 简单 php 代码跟踪调试实现

    简单 php 代码跟踪调试实现 debug_backtrace:生成回溯 debug_print_backtrace:打印回溯 1. debug_backtrace ($options = DEBUG ...

  3. 【dp】P2642 双子序列最大和

    题目描述 给定一个长度为n的整数序列,要求从中选出两个连续子序列,使得这两个连续子序列的序列和之和最大,最终只需输出最大和.一个连续子序列的和为该子序列中所有数之和.每个连续子序列的最小长度为1,并且 ...

  4. 给centos装图形界面 widowsx

    检查Linux系统是否能够联网.   执行命令 yum -y groupinstall Desktop   等上面的命令执行完后,再执行这条命令 yum -y groupinstall "X ...

  5. 如何安装多个mysql 或者如何更改mysql服务名

    此教程适合免安装版本(压缩包)的mysql: 有的时候你需要一台计算机上安装不同的mysql版本,而不同版本的mysql服务名称都是mysql,安装时会有冲突 解决的办法就是安装的时候更改名字 在命令 ...

  6. Windows 10 x64 下编译 Hadoop 源码

    Windows 10 x64 下编译 Hadoop 源码 环境准备 Hadoop并没有提供官方的 Windows 10 下的安装包,所以需要自己手动来编译,官方文档中 BUILDING.txt 文件中 ...

  7. SNMP mib文件说明

    MIB file的开始和结束 所有的MIB file的都以DEFINITIONS ::= BEGIN关键字开始,以END结束.我们所有添加的节点均应在此之间. XXX-TEST-MIB DEFINIT ...

  8. Python——Selenium & Chrome Driver配置

    1.CMD下载安装selenium pip install selenium 2.python运行: from selenium import webdriver browser = webdrive ...

  9. [置顶]Python开发之路

    阅读目录   第一篇:python入门 第二篇:数据类型.字符编码.文件处理 第三篇:函数 第四篇:模块与包 第五篇:常用模块 第六篇:面向对象 第七篇:面向对象高级 第八篇:异常处理 第九篇:网络编 ...

  10. How to Create UML in Markdown

    Import yuml class format ![](http://yuml.me/diagram/boring/class/[...]) Create your own class Person ...