图标推荐与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
直接推荐一个图标预览网站：
自己写一个也可以，借助Chatgpt
<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="例如：<svg width='100' height='100'>...</svg>"></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>
Tags:
Blogger