svg是一种开放标准的矢量图形语言，是可缩放的矢量图形格式。svg格式的图像可任意放大图形显示，而且边缘异常清晰，生成的文件很小，方便传输，文字在svg图像中保留可编辑和可搜寻的状态，没有字体的限制，所以十分适合用于设计高分辨率的Web图形页面。

svg是目前十分流行的图像文件格式了,svg严格来说应该是一种开放标准的矢量图形语言，使用svg格式我们可以直接用代码来描绘图像，可以用任何文字处理工具打开svg图像，通过改变部分代码来使图像具有交互功能，并可以随时插入到HTML中通过浏览器(如火狐浏览器)来观看。使用svg格式可让你设计激动人心的、高分辨率的Web图形页面。

svg格式具备目前网络流行的jpg和png等格式无法具备的优势：可以任意放大图形显示，但绝不会以牺牲图像质量为代价;可在svg图像中保留可编辑和可搜寻的状态;平均来讲，svg文件比其它格式的图像文件要小很多，因而下载也很快。



简单来说就是既可以当图片来显示，又可以当作文字来显示，而且他的大小比起png，jpg又小得多

至于为什么要用svg，理由也是多种多样，有时候感觉很重要，像我，喜欢上svg，只是因为看到一幅svg版的中国地图。
//myfirst.svg


<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <text x="0" y="15" fill="red">下面是长方形</text>
     <rect x="0" y="24" width="300" height="100" fill="yellow"></rect>
     <text x="0" y="164">下面是带有透明度的圆形</text>
     <circle cx="50" cy="244"  r="40" opacity="0.3"></circle>
 </svg>

效果如下：

java将svg图标读取的api js怎么读取svg文件内容_html

这效果也没什么。是的

接下来是我们的html文件：

index.html:


<!-- <polygon points="100,10 40,180 190,60 10,60 160,180"-->
     <!--<text x="0" y="15" fill="red">I love SVG</text>-->
 <!--<a xlink:href="http://www.w3cschool.cc/svg/" target="_blank">-->
     <!--<text x="0" y="15" fill="red">I love SVG</text>-->
   <!--</a>-->
   <!--动画-->
    <!--<rect x="20" y="20" width="250" height="250" style="fill:blue">-->
     <!--<animate attributeType="CSS" attributeName="opacity" from="1" to="0" dur="5s" repeatCount="indefinite" />-->
   <!--</rect>-->
   <!DOCTYPE html>
 <html>

     <head>
         <meta charset="UTF-8">
         <title></title>
     </head>

     <body>
         <!--当用图片显示的时候不需要使用object对象，只需要是哟个image对象-->
         <!--<img id="myimg" src="myfirst.svg" style="width: 100%;" />-->
         <button id="clickme">clickme</button>
         <object id="myobject" data="myfirst.svg"></object>
         <script src="a.js"></script>
     </body>

 </html>


其中有a。js文件，那么久上文件：

a.js


document.getElementById("clickme").addEventListener("click", function() {
     //以下是在js中操作svg的方法
     document.getElementById("myobject").getSVGDocument().getElementById("myrect").setAttribute("fill", "yellow");
 });

a。js提供了使用svg节点的方法，对了，由于我改动过东西，所以会报错，你们在svg文件的recr中加个id就可以了

至于怎么去绘制svg图像，这个我建议大家去w3c好好学习