ZoyaPatel

SVG 图片介绍和网站推荐以及预览工具

SohaniSharma


图标推荐与SVG预览

在建站过程中,尤其是在使用 Google Blogger 模板时,站长常常需要用到各种图标。本文将基于这一需求,推荐一些大厂使用的免费图标,并介绍如何通过 SVG 嵌入网页的方式来实现图标的显示。

什么是 SVG?

SVG 图标是一种采用 SVG(Scalable Vector Graphics,可缩放矢量图形)格式制作的图标。与传统的图片格式(如 JPG、PNG)不同,SVG 是基于 XML 的矢量图形格式。

通过 XML,浏览器能够识别出这是一个图形文件,并按照其中的矢量信息逐笔绘制,最终在网页上展示出来。这样,SVG 图标不仅可以自由缩放而不失真,还可以灵活地进行样式和交互设计。

<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#78A75A">
 <path
   d="M240-200h120v-240h240v240h120v-360L480-740 240-560v360Zm-80 80v-480l320-240 320 240v480H520v-240h-80v240H160Zm320-350Z" />
</svg>

你可以将 SVG 代码直接嵌入 HTML 或者 SVG 预览工具中,图标就可以立即展示出来。由于 SVG 是矢量图形格式,它不依赖于 PNG 或 JPG 等文件格式,这样的设计优势显而易见:图标可以无限缩放而不会失真,且文件体积通常较小。

SVG 免费网站推荐

Google:https://fonts.google.com/icons

SVGRepo:https://www.svgrepo.com/

这两个网站基本就够用了。第一个来自 Google,权威性毋庸置疑;第二个资源丰富,包含了超过 50 万个可完全免费使用的 SVG 图标。最关键的是,它们都可以直接打开使用,无需登录、验证码等繁琐操作,不像阿里巴巴那样还需要一堆手续才能用。

如何预览SVG

图标预览网站:https://uutool.cn/svg-preview/

借助Chatgpt https://www.lksr.net/p/svg-preview.html](https://draft.blogger.com/u/1/blog/post/edit/5300548854522583283/8563943399662562940#)

 <div id="svg-preview-app"></div>
<script>
  (function () {
       const host = document.getElementById('svg-preview-app');
       const shadow = host.attachShadow({ mode: 'open' });

       shadow.innerHTML = `
  <style>
    :host {
       all: initial;
    }
    * {
       box-sizing: border-box;
    }
     .container {
       font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
       padding: 1rem;
       background: var(--cardBg, #fff);
       color: var(--title, #222);
       border-radius: 12px;
       border: 1px solid var(--border, #e3e3e3);
       box-shadow: 0 2px 4px rgba(0,0,0,0.03);
       margin: 1rem 0;
    }
     h2, h3 {
       font-size: 1.2rem;
       margin: 0 0 0.5rem 0;
    }
     p {
       font-size: 0.95rem;
       margin: 0.5rem 0;
       color: var(--metaColor, #666);
    }
     textarea {
       width: 100%;
       height: 180px;
       font-family: monospace;
       font-size: 14px;
       padding: 0.75rem;
       border-radius: 8px;
       border: 1px solid var(--border, #ccc);
       background: var(--contentBg, #fafafa);
       color: var(--title, #222);
       resize: vertical;
       transition: border-color 0.3s;
    }
     textarea:focus {
       outline: none;
       border-color: var(--linkColor, #4285f4);
    }
     .preview {
       margin-top: 1rem;
       padding: 1rem;
       background: var(--contentBg, #f9f9f9);
       border-radius: 8px;
       border: 1px dashed var(--border, #ccc);
       min-height: 60px;
    }
     .preview svg {
       max-width: 100%;
       height: auto;
       display: block;
       margin: auto;
    }
     .button-group {
       margin-top: 1rem;
       display: flex;
       justify-content: space-between;
    }
     button {
       padding: 0.5rem 1rem;
       border: none;
       border-radius: 8px;
       background-color: var(--linkColor, #4285f4);
       color: white;
       font-size: 1rem;
       cursor: pointer;
       transition: background-color 0.3s;
    }
     button:hover {
       background-color: var(--linkHoverColor, #357ae8);
    }
     button:disabled {
       background-color: #ccc;
       cursor: not-allowed;
    }
  </style>
  <div class="container">
    <h2>SVG 预览工具</h2>
    <p>粘贴 SVG 代码实时查看图像效果:</p>
    <textarea id="input" placeholder="例如:&lt;svg width='100' height='100'&gt;...&lt;/svg&gt;"></textarea>
    <h3>实时预览</h3>
    <div class="preview" id="output">
      <p style="color: var(--metaColor, gray);">SVG 图像将在此处显示</p>
    </div>
    <div class="button-group">
      <button id="clearBtn">清空输入</button>
      <button id="downloadBtn" disabled>下载 SVG</button>
    </div>
  </div>
`;

       const input = shadow.getElementById('input');
       const output = shadow.getElementById('output');
       const clearBtn = shadow.getElementById('clearBtn');
       const downloadBtn = shadow.getElementById('downloadBtn');

      // 监听输入框的变化,更新预览和下载按钮状态
       input.addEventListener('input', () => {
           const code = input.value.trim();
           output.innerHTML = code || '<p style="color: var(--metaColor, gray);">SVG 图像将在此处显示</p>';
           downloadBtn.disabled = !code; // 如果没有输入 SVG,禁用下载按钮
      });

      // 清空输入框的内容
       clearBtn.addEventListener('click', () => {
           input.value = '';
           output.innerHTML = '<p style="color: var(--metaColor, gray);">SVG 图像将在此处显示</p>';
           downloadBtn.disabled = true; // 清空后禁用下载按钮
      });

      // 下载 SVG 图像
       downloadBtn.addEventListener('click', () => {
           const code = input.value.trim();
           if (code) {
               const blob = new Blob([code], { type: 'image/svg+xml' });
               const url = URL.createObjectURL(blob);
               const a = document.createElement('a');
               a.href = url;
               a.download = 'image.svg';
               document.body.appendChild(a);
               a.click();
               document.body.removeChild(a);
               URL.revokeObjectURL(url);
          }
      });
  })();
</script>

版权声明:
感谢您的阅读,除非文中已经注明来源网站,否则均为理科生网原创内容,转载时请务必以超链接(而非纯文本链接)标注来源于理科生网及本文完整链接,感谢!
{alertInfo}
Ahmedabad
Kolkata
Hyderabad
后一页 Bangalore 前一页

Random Manga

Ads

نموذج الاتصال