如何添加 SVG logo

主题添加 Logo 的地方往往有多个，比如：

• Logo
• Retina Logo
• Mobile Logo
• Sticky header Logo

设置起来麻烦，不设的话有些屏幕上看着模糊，使用 SVG Logo 很好的解决了这些问题，SVG 是一种矢量格式所以不管放多大都不会模糊，而且一般它体积还比较小。

如果你还能联系到 Logo 的设计师，时隔不远一般不会拒绝给 Logo 转化下格式。

如果不行就得自己转化下格式了。

AI 转化为 SVG

通常 Logo 以 AI 格式提供，为了更好的展现，添加了白色的背景色，不能直接用在网站上，需要先去除下。

如果你没有或者不方便使用 Adobe Illustrator，可以试用这个在线的编辑器去除白边后转化为 SVG

Grivit Desinger

或者使用

CloudConvert AI to SVG 转化后再去除白边。

这个答案中

https://stackoverflow.com/questions/35683884/remove-whitespace-from-svg/53786013

Falselight 的回答有时可用，使用文本编辑器打开 SVG 复制文本到答案中将去除后的文本复制回即可。

如果没有 AI 格式，只有 PNG，那么使用

PNG 转化为 SVG

https://www.pngtosvg.com

适合颜色不多的 Logo，Colors 选少些，生成的 SVG 会显著减小。

2023-12-03_02:00:02 +0800

AI 带来了更好用的图片转矢量工具：

https://vectorizer.ai/

SVG 精简与尺寸修改

如果发现生成的 SVG 比较大，可以使用 https://vecta.io/nano 精简下。

如果用于转化的 PNG 尺寸过大，生成的 SVG 尺寸也比较大，想改小点，可以使用文本编辑器打开 SVG，按比例修改 width 和 height 即可。

如果用了上边的精简则不能改。

2023-12-03_01:59:42 +0800

也可以用这两个工具精简

SVG Viewer

SVGOMG

WordPress Meida 中允许 SVG 上传

WordPress 媒体中由于安全默认是不能上传 SVG 的，有很多种方法启用，比如：

主题，插件或者 Code snippets 中添加代码

/**
* @snippet       Enable SVG upload
*/
function enable_svg_upload( $upload_mimes ) {
    $upload_mimes['svg'] = 'image/svg+xml';
    $upload_mimes['svgz'] = 'image/svg+xml';
    return $upload_mimes;
}
add_filter( 'upload_mimes', 'enable_svg_upload', 10, 1 );

或者 wp-config.php 中添加

define('ALLOW_UNFILTERED_UPLOADS', true);

有的插件比如 Elementor 或者 Happyfiles 中也有开启 SVG 上传的功能

如果上边的方法你都试过还是提示不能上传，那么用 SafeSVG 插件

https://wordpress.org/plugins/safe-svg/

启用上传完 SVG 后记得禁用 SVG 上传，然后删除插件。