如何在Thymeleaf的HTML片段中显示SVG图形？已尝试方案无效

DevOps 小满

2026-5-25

嘿，我来帮你搞定这个SVG显示的问题！结合你用的Thymeleaf 3、Spring Boot 4和Flying Saucer技术栈，之前的写法没奏效主要是路径没写对，还有对SVG标签的用法以及Flying Saucer的资源加载逻辑不熟悉，咱们一步步解决：

第一步：先纠正资源路径

Spring Boot里，static目录是静态资源的根目录，你的SVG放在static/images/vector.svg，所以Thymeleaf的URL表达式必须写完整路径：@{/images/vector.svg}，而不是你之前的@{vector.svg}——少了/images/前缀，Thymeleaf根本找不到文件！

第二步：分场景解决SVG显示问题

场景1：在普通网页中渲染SVG（非PDF）

用<img>标签是最简单的方式，只要路径正确就没问题：

<img th:src="@{/images/vector.svg}" alt="矢量图形" width="300" height="300">

如果你想更灵活地控制SVG样式（比如修改颜色），可以用<object>标签，它支持直接加载SVG文件，还能提供降级方案：

<object th:data="@{/images/vector.svg}" type="image/svg+xml" width="300" height="300">
    <!-- 当浏览器不支持SVG时显示降级图片 -->
    <img th:src="@{/images/vector-fallback.png}" alt="矢量图形">
</object>

⚠️ 注意：<svg>标签本身不支持src属性，你之前直接给<svg>加th:src的写法从语法上就不对，<svg>标签是用来直接写SVG代码内容的，不是用来引用外部文件的。

场景2：在Flying Saucer生成的PDF中渲染SVG

Flying Saucer对SVG的支持需要特殊处理，因为它默认的资源解析逻辑可能找不到classpath下的静态资源，这里有两种靠谱的方案：

方案A：内联SVG内容（推荐，简单直接）

把SVG文件的内容直接嵌入到HTML里，Flying Saucer能直接解析。用Thymeleaf的th:utext读取资源文件内容：

<div th:utext="${@resourceLoader.getResource('classpath:static/images/vector.svg').inputStream.readAllBytes().toString()}"></div>

这里@resourceLoader是Spring提供的资源加载器，能直接读取classpath下的文件，th:utext会把读取到的SVG代码直接渲染到页面中，不需要额外处理。

方案B：配置Flying Saucer的资源解析器

如果不想内联内容，可以自定义一个资源解析器，让Flying Saucer能正确找到静态资源。创建一个配置类：

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.xhtmlrenderer.pdf.ITextRenderer;
import org.xhtmlrenderer.resource.ITextUserAgent;

import java.io.IOException;
import java.io.InputStream;

@Configuration
public class FlyingSaucerConfig {
    @Bean
    public ITextRenderer textRenderer() {
        ITextRenderer renderer = new ITextRenderer();
        renderer.getSharedContext().setUserAgentCallback(new ITextUserAgent(renderer.getSharedContext()) {
            @Override
            public InputStream resolveResource(String uri, String baseUri) throws IOException {
                // 处理/images/开头的资源请求
                if (uri.startsWith("/images/")) {
                    return getClass().getResourceAsStream("/static" + uri);
                }
                return super.resolveResource(uri, baseUri);
            }
        });
        return renderer;
    }
}

配置好之后，在HTML里用<img>标签就能正常加载SVG了：

<img th:src="@{/images/vector.svg}" width="300" height="300">

最后再检查一遍

确认SVG文件确实在src/main/resources/static/images/vector.svg路径下；
清理浏览器缓存（或者用Ctrl+F5强制刷新），避免旧的错误路径缓存影响结果；
如果是PDF渲染，确保Flying Saucer的版本是最新的，旧版本对SVG的支持可能有bug。

内容的提问来源于stack exchange，提问作者FunkyMan