Outputting SVG image assets inline - can it be done?

Question

We are using SVG images more and more and I would like to put some of these inline using the <svg>...</svg> code directly in the markup. I've done this successfully when the image is added as part of the Component Template as I just add the SVG code to the template. What I would also like to do is access the code within SVG images that are stored as image assets so rather than adding the SVG as the src attribute of an img tag, use the SVG code within the file instead.

I've tried using svgImgAssetObj.Multimedia.GetBinaryContent() and writing out the result but that just gives me a type mismatch. Is there any way to do this on render?

My fallback is to publish the image and then use client side JavaScript to read the SVG code and put it in the markup, but this cancels out the reduction in http requests that putting an SVG inline achieves.

We're using Tridion2011 in case that's significant to any solution.

Answer 1

We have a TBB "Output Multimedia Component as String", which may (or may not!) work for you with a little adaptation:

BinaryContent binaryContent = component.BinaryContent;
byte[] bytes = binaryContent.GetByteArray();
UTF8Encoding enc = new UTF8Encoding();
string output = enc.GetString(bytes);

We used this in the early days for outputting script content saved in a MM Component, so given SVGs are essentially text, I think it could work.