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. bugku web web3

    flag就在这里快来找找吧http://123.206.87.240:8002/web3/ 点进去这个页面可以看到不断地有提示 flag就在这里 来找找吧 那就找一找哇 在source中可以找到一行注 ...

  2. SPFA求最短路——Bellman-Ford算法的优化

    SPFA 算法是 Bellman-Ford算法 的队列优化算法的别称,通常用于求含负权边的单源最短路径,以及判负权环.SPFA 最坏情况下复杂度和朴素 Bellman-Ford 相同,为 O(VE), ...

  3. Educational Codeforces Round 63 (Rated for Div. 2) B. Game with Telephone Numbers 博弈思维+模拟+贪心思维

    题意:博弈题面  给出一个数字序列 (>=11)  有两个人任意删除数字 直到 数字只剩下11位 如果删除后的数字串开头是8那么就是第一个赢 否则就是第二个人赢 第一个人先手  数字序列一定是奇 ...

  4. [SDOI2017]遗忘的集合

    [SDOI2017]遗忘的集合 综合了很多套路的题 一看就是完全背包 生成函数! 转化为连乘积形式 Pi....=F 求Ln! 降次才可以解方程 发现方程是: f[i]=∑t|i : bool(t)* ...

  5. Security+ 认证考过经验分享 802分飘过

    PART 1/考前准备 1.针对与新人.学生建议看每一节直播课程,老师会结合自己的工作工作经验讲解课程,可以帮助学生理解知识. 2.备考期间建议官方指导手册至少看两遍以上,我在结合自己的做题库时发现有 ...

  6. PTA编译总结求最大值及其下标

    代码: #include<stdio.h>    int main(void)    {    int i,index=0,n;    int a[10];    scanf(" ...

  7. [BZOJ4318] OSU!

    比较简单,每个键分两种情况计算期望. 然而要注意的是,期望是线性运算,期望的平方不是平方的期望 . #include <cmath> #include <queue> #inc ...

  8. 2018-2019-2 网络对抗技术 20165232 Exp4 恶意代码分析

    2018-2019-2 网络对抗技术 20165232 Exp4 恶意代码分析 1.实践目标 监控你自己系统的运行状态,看有没有可疑的程序在运行. 分析一个恶意软件,就分析Exp2或Exp3中生成后门 ...

  9. jq选择器（jq 与 js 互相转换），jq操作css样式 / 文本内容， jq操作类名，jq操作全局属性,jq获取盒子信息,jq获取位置信息

    jq选择器(jq 与 js 互相转换) // 获取所有的页面元素jq对象 $('css3选择器语法'); var $box = $(".box:nth-child(1)"); 获取 ...

  10. 网络&协议目录

    HTTP [基础] HTTP入门学习 网络基础 数据传输 网站架构演化 连接管理 缓存 [组成] URL 报文起始行 报文首部 [结构] Web服务器 代理 网关.隧道和中继 [安全] Web攻击技术 ...