svg图标如何在html页面使用

什么,svg图标？我记得svg有个功能是做图标字体，还以为svg像ttf之类一样，都是字体的格式，那你就错了，svg是一种图像的格式，

这种格式的图像在放大或改变尺寸的情况下其图形质量不会有所损失，常常被用来做图标，比如下面这个：

单个svg图标可以直接用浏览器打开，上面那个svg用浏览器打开后显示如图：

关键是怎么使用它呢？难道真的要用网上说的那些使用embed,object等这些稀奇古怪的标签才行吗？不用的，直接使用我们熟悉的img标签就可以了，跟操作普通的png，jpg等图片是完全一样的。如下面这段代码就通过img标签引用了svg图标：

<div class="col-sm-10 col-sm-offset-1">
    <span>Hi~</span><br><span>欢迎回来，请登录</span>
    <span class="errinfo hid"><img  src="anti/imgs/login_error.svg">请输入正确的用户名和密码</span>
</div>

效果如图：