html页面图标(html怎么设置图标)

　　这篇文章主要介绍了HTML5新特性之用SVG绘制的微信logo的相关资料，需要的朋友可以参考下。

　　HTML5新特新

　　HTML5中的一些有趣的新特性：

　　1、用于绘画的canvas元素

　　2、用于媒介回放的video和audio元素

　　3、对本地离线存储的更好的支持

　　4、新的特殊内容元素，比如article、footer、header、nav、section

　　5、新的表单控件，比如calendar、date、time、email、url、search

　　SVG绘制图片效果图：

代码如下：

　　* {

　　padding: ;

　　margin: ;

　　}

　　body {

　　background-color: #ddd;

　　}

　　.container {

　　width: px;

　　height: px;

　　position: relative;

　　top: px;

　　left: %;

　　transform: translated(-%,,);

　　background-color:#c;

　　border-radius: px;

　　box-shadow: px #cbfbf;

　　}

　　.container object{

　　position:relative;

　　top:px;

　　left:px;

　　}

　　这个是xml格式的代码，跟html文档分离的。

　　代码如下：

　　<?xml version="." standalone="no"?>

　　<!DOCTYPE svg PUBLIC "-//WC//DTD SVG .//EN"

　　"https://www.w.org/Graphics/SVG/./DTD/svg.dtd">

　　<svg width="%" height="%" version="." xmlns="https://www.w.org//svg">

　　<ellipse cx="" cy="" rx="" ry="" style="fill:rgb(,,);stroke:rgb(,,);stroke-width:"/>

　　<circle cx="" cy="" r="" style="fill:#c;stroke:#c;stroke-width:"/>

　　<circle cx="" cy="" r="" style="fill:#c;stroke:#c;stroke-width:"/>

　　<polygon points=", , ," style="fill:#fff;stroke:#fff;stroke-width:"/>

　　<ellipse cx="" cy="" rx="" ry="" style="fill:#c;stroke:#c;stroke-width:"/>

　　<ellipse cx="" cy="" rx="" ry="" style="fill:rgb(,,);stroke:rgb(,,);stroke-width:"/>

　　<circle cx="" cy="" r="" style="fill:#c;stroke:#c;stroke-width:"/>

　　<circle cx="" cy="" r="" style="fill:#c;stroke:#c;stroke-width:"/>

　　<polygon points=", , ," style="fill:#fff;stroke:#fff;stroke-width:"/>

　　</svg>

　　以上所述是小编给大家分享的HTML5新特性之用SVG绘制的微信logo,希望对大家有所帮助。

　　推荐：马继华：大数据营销不能自作聪明 别小瞧你的消费者