htmlayout设计ui 基础篇：[15]svg图使用

1、第一，先拿到我们要使用的SVG图形代码，它是以.svg格式存在的如图所示：

2、第二，这个格式的外观效果，可以直接用Sciter v.3来查看，效果如下：

3、第三，接下来，我们来看下，如何在UI布局中，把.svg的文件加进来，从而实现界面中显示svg图的效果样式代码如下：section > div.few-clouds-night{background-image:url(weather-few-clouds.svg);background-repeat:no-repeat;background-position: 0 50%;background-size:64dip;}

4、第四，正文添加代码如下：<section> <div class="few-clouds" >few-clouds</div></section>效果如下：

5、第五，主要是样式中的引用，来说下代码的意思：1、background-image:url(嘛术铹砾weather-few-clouds.svg);和背景掬研疔缎图片引用是一样的，只不过这里是引用.svg格式的（一样是矢量图片格式）2、background-repeat:no-repeat;表示只显示一张图片，没有重复3、background-position: 0 50%;表示水平左对齐，垂直居中对齐4、background-size:64dip;表示背景图片大小

6、第五，单位说明dip : device independent pixels(设备独立像素)不同设备有不同的显示效果,这个和设备硬件有关，一般我们为了支持WVGA、HVGA和 QVGA 推荐使用这个，不依赖像素。