SVG（可缩放矢量图形）已经成为现代 Web 设计的标准格式。相比字体图标（如 Font Awesome），SVG 具有更小的体积、更高的清晰度、更灵活的样式控制能力。在 WordPress 中充分利用 SVG，可以大幅提升网站的视觉品质和加载速度。

WordPress 默认不允许上传 SVG 文件，因为 SVG 是 XML 格式，可能包含恶意代码（如 JavaScript）。启用 SVG 上传需要添加过滤器和额外的安全检查：

add_filter('upload_mimes', 'allow_svg_upload');
function allow_svg_upload($mimes) {
    $mimes['svg'] = 'image/svg+xml';
    $mimes['svgz'] = 'image/svg+xml';
    return $mimes;
}

add_filter('wp_check_filetype_and_ext', 'fix_svg_mime_type', 10, 4);
function fix_svg_mime_type($data, $file, $filename, $mimes) {
    $ext = pathinfo($filename, PATHINFO_EXTENSION);
    if ($ext === 'svg' || $ext === 'svgz') {
        $data['type'] = 'image/svg+xml';
        $data['ext'] = $ext;
    }
    return $data;
}

SVG 安全过滤 是上传 SVG 时必须考虑的问题。你可以使用 sanitize_svg 函数（WordPress 5.9+ 内置）或者第三方库来清理 SVG 中的恶意代码：

add_filter('wp_handle_upload_prefilter', 'sanitize_svg_before_upload');
function sanitize_svg_before_upload($file) {
    if ($file['type'] !== 'image/svg+xml') return $file;
    $svg_content = file_get_contents($file['tmp_name']);
    // 使用 WordPress 内置的 SVG 清理函数
    if (function_exists('sanitize_svg')) {
        $cleaned = sanitize_svg($svg_content);
        file_put_contents($file['tmp_name'], $cleaned);
    }
    return $file;
}

在 WordPress 中显示 SVG 有多种方式。最简单的是在文章内容中使用 <img> 标签引用上传的 SVG 文件。但更好的做法是将 SVG 代码直接内联到模板中，这样可以用 CSS 控制填充色、大小和动画：

function get_svg_icon($name, $class = '') {
    $svg_path = get_stylesheet_directory() . '/assets/svg/' . $name . '.svg';
    if (!file_exists($svg_path)) return '';
    $svg_content = file_get_contents($svg_path);
    if ($class) {
        $svg_content = str_replace('class="', 'class="' . esc_attr($class) . ' ', $svg_content);
    }
    return $svg_content;
}

// 在模板中使用
echo get_svg_icon('logo', 'site-logo');

动态 SVG 图标库 可以让你在后台的菜单、小工具或页面构建器中方便地选择图标。注册一个自定义字段，让用户从预定义的图标列表中选择：

add_action('add_meta_boxes', 'add_icon_selector_metabox');
function add_icon_selector_metabox() {
    add_meta_box('icon_selector', '图标选择', 'render_icon_selector', 'page', 'side');
}

function render_icon_selector($post) {
    $selected = get_post_meta($post->ID, '_page_icon', true);
    $icons = array('home', 'about', 'contact', 'blog', 'shop', 'user', 'cart');
    echo '<select name="page_icon">';
    echo '<option value="">无图标</option>';
    foreach ($icons as $icon) {
        echo '<option value="' . $icon . '" ' . selected($selected, $icon, false) . '>' . $icon . '</option>';
    }
    echo '</select>';
}

SVG 无障碍支持（Accessibility） 是经常被忽略的方面。对于装饰性图标，添加 aria-hidden="true" 让屏幕阅读器忽略。对于功能性图标（如按钮图标），添加 role="img" 和 aria-label 描述其功能：

function get_accessible_svg_icon($name, $label = '') {
    $svg = get_svg_icon($name);
    if (empty($label)) {
        $svg = str_replace('<svg', '<svg aria-hidden="true"', $svg);
    } else {
        $svg = str_replace('<svg', '<svg role="img" aria-label="' . esc_attr($label) . '"', $svg);
    }
    return $svg;
}

SVG 精灵图（Sprite） 是优化多个 SVG 图标加载的一种方式。将所有图标合并到一个 SVG 文件中，使用 <use> 标签引用。这样可以减少 HTTP 请求：

// 在主题中输出 SVG 精灵图
add_action('wp_footer', 'output_svg_sprite');
function output_svg_sprite() {
    $sprite_path = get_stylesheet_directory() . '/assets/svg/sprite.svg';
    if (file_exists($sprite_path)) {
        echo file_get_contents($sprite_path);
    }
}

// 在模板中使用精灵图中的图标
echo '<svg><use href="#icon-home"></use></svg>';

SVG 动画 是提升用户体验的另一个维度。使用 CSS @keyframes 或 SMIL 动画为 SVG 添加过渡效果。WordPress 中可以通过自定义 CSS 或者 Gutenberg 块的内联样式来实现。

SVG 相比字体图标和位图有诸多优势，但在 WordPress 中使用时需要注意安全和无障碍问题。一旦建立了完善的 SVG 工作流，它将成为你设计工具箱中不可或缺的一部分。