Lightning 中使用SVG

1. SVG的定义

1. SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
2. SVG 用来定义用于网络的基于矢量的图形
3. SVG 使用 XML 格式定义图形
4. SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失
5. SVG 是万维网联盟的标准
6. SVG 与诸如 DOM和 XSL 之类的W3C标准是一个整体

2. 与其他图像格式相比，使用 SVG 的优势在于：

1. SVG 可被非常多的工具读取和修改（比如记事本）
2. SVG 与 JPEG 和 GIF 图像比起来，尺寸更小，且可压缩性更强。
3. SVG 是可伸缩的
4. SVG 图像可在任何的分辨率下被高质量地打印
5. SVG 可在图像质量不下降的情况下被放大
6. SVG 图像中的文本是可选的，同时也是可搜索的（很适合制作地图）
7. SVG 可以与 Java 技术一起运行
8. SVG 是开放的标准
9. SVG 文件是纯粹的 XML

以上引用百度百科

3. Lightning中使用SVG

1. 这里不讨论SVG本身的知识,W3C上有文章描述,另外有两篇博客的介绍SVG图标颜色文字般继承与填充,SVG Sprite技术介绍

2. 在页面中,我们经常使用一图标增加页面的美观,有些图标被我们大家授受,这样就可以省略掉文本,毕竟图片更形象

3. 之前我们用的更多的是用png之类的图片通过img引用,一来,需要通过ps处理成合适的尺寸,如果在Img上通过宽度与高度会使图片变形

4. 上面的优点中,提到与jpeg/gif相比,尺寸更小,svg的文件本身是xml格式描述,如下图,是SF提供的标准的SVG

   

5. SLDS中下载SLDS包,在如下截图中存放的ICON,SF提供了SVG也提供了2种不同尺寸的png

6. html5中嵌入SVG方法有多种具体度娘

   a. 直接写svg b. 通过img引用 c. CSS方法

   效果图

   

7. SVG Sprite与symbol元素 将svg放到一个文件中,通过use元素引用 如图是SFAction中的svg 在目录action-sprite中svg symbols.svg

   

8. 使用:lightning:icon 标签引用,通过class 修改背景颜色,暂时没有找到是不是可以引用自定义svg(看了文档只能引用标准的SLDS定义好的)

9. Lightning组件中不能直接像html5中写svg,在google上找到一段代码,通过这个组件引用自定义的svg.看了下代码,当在页面渲染完通过js生成拼接成html代码嵌入到页面中.

   svgIcon.cmp

    <aura:component description="svgIcon">  	<aura:attribute name="svgPath" default="" type="String" description="the path for the icon in the static resource, this will be use in a SVG use tag" />  	<aura:attribute name="name"           default="" type="String" description="Symbol name of icon" />  	<aura:attribute name="class"          default="" type="String" description="the class of this SVG tag, can be use for CSS purpose" />  	<aura:attribute name="containerClass" default="" type="String" description="Container class name for span container of icon" />  	<aura:attribute name="category"       default="" type="String" description="Category of icon- action, standard, utility etc." />  	<aura:attribute name="size"           default="" type="String" description="Size of icon-- small, medium, large" />  	<aura:attribute name="assistiveText"  default="" type="String" description="Description name of icon" />  	<span aura:id="container" class="{!v.containerClass}">  		<span aura:id="assistiveText" class="slds-assistive-text">{!v.assistiveText}</span>  	</span>  </aura:component> 

   svgIconHelper.js

    ({    renderIcon: function(component) {      var prefix = "slds-";      var svgns = "http://www.w3.org/2000/svg";      var xlinkns = "http://www.w3.org/1999/xlink";      var size = component.get("v.size");      var name = component.get("v.name");      var classname = component.get("v.class");      var containerclass = component.get("v.containerClass");      var category = component.get("v.category");       var containerClassName = [        prefix+"icon_container",        prefix+"icon-"+category+"-"+name,        containerclass      ].join(' ');      component.set("v.containerClass", containerClassName);       var svgroot = document.createElementNS(svgns, "svg");      var iconClassName = prefix+"icon "+prefix+"icon--" + size+" "+classname;      svgroot.setAttribute("aria-hidden", "true");      svgroot.setAttribute("class", iconClassName);      svgroot.setAttribute("name", name);       // Add an "href" attribute (using the "xlink" namespace)      var shape = document.createElementNS(svgns, "use");      shape.setAttributeNS(xlinkns, "href", component.get("v.svgPath"));      svgroot.appendChild(shape);       var container = component.find("container").getElement();      container.insertBefore(svgroot, container.firstChild);    }  }) 

   svgIconRenderer.js

    	({  	  render: function(component, helper) {  	    // By default, after the component finished loading data/handling events,  	    // it will call this render function this.superRender() will call the  	    // render function in the parent component.  	    var ret = this.superRender();   	    // Calls the helper function to append the SVG icon  	    helper.renderIcon(component);  	    return ret;  	  }  	}) 

如有好的方式方法欢迎交流