norito / SVG 雪碧图生成器

SVG 雪碧图生成器

拖入多个 SVG 图标，得到一份合并好的 <symbol> 雪碧图， ID 自动生成且不会冲突。

点击选择 .svg 文件，或将它们拖放到这里

可一次选择多个图标。文件留在你的设备上，不会被上传。


          

          

            
            
          

        

      

    


    

      
工作原理

      

        每个上传的 SVG 都会用浏览器自带的 DOM 解析器解析，读取其
        viewBox（如果没有设置 viewBox，则读取 width/height），并把内部标记
        包裹进一个 <symbol id="..." viewBox="..."> 元素。然后所有 symbol
        会被合并进一个隐藏的 <svg> 中，这是把多个图标合并为一次请求、
        而不是多个独立图片文件或多份内联代码的标准 "SVG 雪碧图" 模式。ID 从每个文件的
        文件名派生，如果两个文件会产生冲突，会自动去重。
      

      

        解析和合并全部在本页面的 JavaScript 中完成。你上传的任何内容都不会被发送到
        任何地方。
      

    


    

      
相关工具

      

        
          SVG 优化器
          去除 SVG 中的注释和元数据。
        
        
          SVG 转 React 组件
          把 SVG 代码转换成 JSX 组件。
        
        
          Favicon 生成器
          从图片生成 favicon。
        
      

    


    
常见问题

    

      

        symbol 雪碧图是怎么工作的？
        
每个图标会变成一个隐藏 <svg> 内的 <symbol id="...">，你只需要把这个 <svg> 放在页面 HTML 中任意位置一次。之后任何元素都可以用 <svg><use href="#id"></use></svg> 渲染出该图标，浏览器只需要下载和解析一次这份图形数据，无论用了多少次。

      

      

        图标 ID 是怎么生成的？
        
来自每个文件的文件名：转小写，非字母数字字符替换为连字符，并去掉扩展名。如果两个文件生成了相同的 ID，会自动加上数字后缀，保证每个 symbol 都能被单独引用。

      

      

        我的图标会被上传到别的地方吗？
        
不会。文件读取和合并完全通过 File API 在你的浏览器中完成，不会上传任何内容。