Swagger UI svg output showing the svg code as text instead of loading the image

[agilc]

I have an endpoint in Swagger UI. Its output should be an SVG image. But in the response, I'm getting the original SVG code instead of loading the image. How can I solve the issue?

I am using swagger UI NPM package(https://www.npmjs.com/package/swagger-ui) in my NodeJS App.

[shockey]

Hey @agilc! There's no way to do this currently, we display SVG data as-is:

swagger-ui/src/core/components/response-body.jsx

Lines 118 to 122 in 12e350f

	if(contentType.includes("svg")) {
	bodyEl = <div> { content } </div>
	} else {
	bodyEl = <img style={{ maxWidth: "100%" }} src={ window.URL.createObjectURL(content) } />
	}

There has been some discussion (#4018) and work (#4063) around this in the past, but we've never resolved it.

[janakunft]

You just need to make sure you set a correct content type header, then it will work:
'Content-Type': 'image/svg+xml'

[shencypeter]

May I suggest the following:

https://www.w3schools.com/graphics/tryit.asp?filename=trysvg_myfirst

I had just pasted the swagger SVG XML there and it works!

<svg width="100" height="100">
  {{ content }} 
</svg>

[CaptainCrucial]

You just need to make sure you set a correct content type header, then it will work: 'Content-Type': 'image/svg+xml'

There's an xml code block preceding the svg block which makes the content output as XML:

swagger-ui/src/core/components/response-body.jsx

Lines 105 to 113 in 12e350f

	} else if (/xml/i.test(contentType)) {
	body = formatXml(content, {
	textNodesOnSameLine: true,
	indentor: " "
	})
	bodyEl = <HighlightCode downloadable fileName={`${downloadName}.xml`} value={ body } />
	// HTML or Plain Text
	} else if (toLower(contentType) === "text/html" || /text\/plain/.test(contentType)) {

Looks like it would need the svg block moving above this xml block for the graphical output of svg images to reach this code.