If you’re reading this, you’ve come across a need that nearly all Opti developers encounter in their careers; You need to correctly display a vector image format (SVGs and the like). The <IMG> tag just isn’t going to cut it anymore. Posts like this are a right-of-passage for Opti bloggers.
“So,” you think, “if there are so many other blogs on the topic, why should I read yours?” Firstly, you enjoy my familiar and conversational tone of writing.
 |
| Cary Elwes does the English accent, and I do the nerd stuff. |
Second, you’ve already come this far; you might as well finish at this point; it’s not long, I promise. To that point, and most importantly, I’ve seen some complex solutions out there. This one is a quick and straightforward implementation. 100% Guarantee!
The VectorFile Class
[MediaDescriptor(ExtensionString = "svg")]
public class VectorFile : ImageData
{
public override Blob Thumbnail { get => BinaryData; }
public virtual string XML
{
get
{
try
{
var blob = BinaryData;
var xmlDoc = new XmlDocument();
xmlDoc.Load(blob.OpenRead());
return xmlDoc.InnerXml;
}
catch
{
return "";
}
}
}
}
This delightful little class will extract the thumbnail for previews and place the image in an XML document that can be inserted into a view as a <SVG> tag. You can see from the MediaDescriptor attribute that we’re only allowing .SVG files here. This list can be expanded as needed. This is where you can also supply different properties regarding your SVG in the class; it’s just content!
The VectorFileController Class
public class VectorFileController : AsyncPartialContentComponent<VectorFile>
{
protected override async Task<IViewComponentResult> InvokeComponentAsync(VectorFile currentBlock)
{
return await Task.FromResult(View("~/Features/Media/_vectorFile.cshtml", currentBlock));
}
}
This should look familiar to CMS12 block development, just your run-of-the-mill controller. No tricks, no fills.
The VectorFile View
@model VectorFile
@if (Model != null)
{
@((MarkupString)Model.XML)
}
