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

图标推荐与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

 <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>