Learn how to set an elements background image to embedded SVG. This method has an added benefit of not incurring any HTTP requests, as the SVG is simply embedded into the CSS. They can also be resized by changing the width and height of the element containing background image, so it’s easy to create multiple sizes of the same icon using this approach.

If you’re looking for the ability to display icons at different sizes and want to modify the SVG interaction styles (such as on :hover), this is could be a good option. One negative to adding the interaction styles is that it requires you to duplicate selectors and the SVG markup; the more icons you have, the larger your stylesheets will become.

Two Rules:

1. The embedded svg image, should use single quote.

2. Should encoder, can use http://meyerweb.com/eric/tools/dencoder/

[SVG] Add an SVG as an Embedded Background Image的更多相关文章

  1. [SVG] Add an SVG as a Background Image

    Learn how to set an SVG as the background image of an element. Background images can be resized by c ...

  2. 【翻译svg教程 】svg 的坐标系统

    http://tutorials.jenkov.com/svg/svg-coordinate-system.html svg的坐标系统(和大多数计算机绘图的坐标系统)和数学中绘图系统有点不一样 数学/ ...

  3. SVG Drawing Animation - SVG 绘制动画

    一个小实验,探索 SVG 线图动画的使用情况,以前沿的展示形式呈现图形或网站元素的外观,模拟它们的加载.SVG 真的很强大,有许多创造性和可能性,使用 SVG 可以制作各种有趣的网站交互效果.今天这篇 ...

  4. SVG 学习<八> SVG的路径——path(2)贝塞尔曲线命令、光滑贝塞尔曲线命令

    目录 SVG 学习<一>基础图形及线段 SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组 SVG 学习<三>渐变 SVG 学习<四 ...

  5. SVG 学习<七> SVG的路径——path(1)直线命令、弧线命令

    目录 SVG 学习<一>基础图形及线段 SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组 SVG 学习<三>渐变 SVG 学习<四 ...

  6. SVG 学习<六> SVG的transform

    目录 SVG 学习<一>基础图形及线段 SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组 SVG 学习<三>渐变 SVG 学习<四 ...

  7. SVG 学习<五> SVG动画

    目录 SVG 学习<一>基础图形及线段 SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组 SVG 学习<三>渐变 SVG 学习<四 ...

  8. SVG vs Image, SVG vs Iconfont

    这可能是个别人写过很多次的话题,但貌似由于兼容性的原因?图标的显示还是用着 Iconfont 或者 CSS Sprite 的形式?希望通过自己新瓶装旧酒的方式能重新引导一下问题. SVG vs Ima ...

  9. [HTML5] Add an SVG Image to a Webpage and Get a Reference to the Internal Elements in JavaScript

    We want to show an SVG avatar of the patio11bot, so we'll do that in three ways: Using an img tag - ...

随机推荐

  1. PHPki

    PHPki PHPki是一个基于开放源码Web的应用程序,用来管理遵守HIPAA的多代理"公钥基础结构".它可以用于创建X.509数字证书,并主要为支持S/MIME的电子邮件客户端 ...

  2. amazeui学习笔记三（你来我往1）--常见问题FAQs

    amazeui学习笔记三(你来我往1)--常见问题FAQs 一.总结 1.DOM事件失败:记得加上初始化代码,例如 图片轮播 $('#my-slider').flexslider(); 2.jquer ...

  3. 最小二乘法，python3实现

    https://www.cnblogs.com/BlogOfMr-Leo/p/8627311.html                      [用的是库函数] https://blog.csdn. ...

  4. PythonNET网络编程3

    IO IO input output 在内存中存在数据交换的操作都可以认为是IO操作 和终端交互 : input print 和磁盘交互 : read write 和网络交互 : recv send ...

  5. 微软云 azure 数据迁移之oracle11g dataguard

    背景,将本地的oracle数据迁移到微软云azure云上面的oracleserver. 1.复制本地的rman备份集到微软云azure的oracleserver上 scp -r -P56922 201 ...

  6. 关于在IISserver上执行asp.net Web程序出现以下 “Could not load file or assembly。。。”问题的

    Could not load file or assembly 'System.EnterpriseServices, Version=4.0.0.0, Culture=neutral, Public ...

  7. LeetCode Algorithm 02_Add Two Numbers

    You are given two linked lists representing two non-negative numbers. The digits are stored in rever ...

  8. Day2：PYC

    一.pyc里装的是预编译后的字节码文件 二.一般存放在”__pycache__“目录 三.当python程序运行时,编译的结果是保存在位于内存中的PyCodeObject中,当Python程序运行结 ...

  9. centos php 安装memcached 扩展 支持sasl

    1.安装sasl yum install cyrus-sasl-lib.x86_64 yum install cyrus-sasl-devel.x86_64 2.下载libmemcached wget ...

  10. JavaScript的String对象的属性和方法

    ---恢复内容开始--- 属性: length              字符串的长度 prototype         字符串的原型对象 constructor       字符串的构造函数,会返 ...