Right mime type for SVG images with fonts embedded

Question

This is the usual SVG mime type:

image/svg+xml

And it works great. However, when embedding an SVG font, chrome tells you the mime type is incorrect, obviously because you return a font instead of an image.

Is there any universal mime type? is chrome wrong? is application/svg+xml accepted somehow?

I guess this is still a gray area in HTML5 but someone here might know.

Answer 1

I think this might also refer to the case when fonts are used (through CSS inside an SVG which is then embedded into an image () tag.

In this case, only embedded fonts will work (encoded w/ base64):

<style><![CDATA[@font-face {font-family: 'eEgji1HZxKV1:::Concert One';font-style: normal;font-weight: 400;src: url(data:font/ttf;charset=utf-8;base64,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) format('truetype');}]]></style>

vs referred as an external source:

<style>@font-face {font-family: 'egXPseElB0p1:::Concert One';font-style: normal;font-weight: 400;src: url(https://fonts.gstatic.com/l/font?kit=VEM1Ro9xs5PjtzCu-srDqRTlnveq-hxGBHL1kVp35ZE&skey=1285a0576bf2d826&v=v22) format('truetype');}</style>

B/c an image cannot initiate another network request.

See more here.

Answer 2

There's only one registered mediatype for SVG, and that's the one you listed, image/svg+xml. You can of course serve SVG as XML too, though browsers tend to behave differently in some scenarios if you do, for example I've seen cases where SVG used in CSS backgrounds fail to display unless served with the image/svg+xml mediatype.