Tag Helpers

Embedded SVG

Attempts to embed an SVG file as HTML content. Any HTML attributes added this tag will be automatically added to the root svg tag.

Tag Requirements

Must use the embedded-svg tag.

Properties

Name	Type	Required	Notes
path	string	Yes*
remove-comments	bool	No	Defaults to true

* for default use cases this property is required. See Advanced usaged.

Usage

<embedded-svg path="/path/to/my.svg" />

With attributes

<embedded-svg path="/path/to/my.svg" width="50" height-"50" aria-label="My SVG" />

Advanced use cases

This tag helper is built for extensibility so another tag helper which is called before can set a context item to set path from another source if needed.

Developers can create another tag helper which provides a source before this tag helper is called.

[HtmlTargetElement(EmbeddedSvgTagHelper.TagName, Attributes = "media")]
public sealed class MyUriEmbedSvgTagHelper : TagHelper
{
    [HtmlAttributeName("url")]
    public Uri? Url { get; set; }

    public override int Order => -1;

    public override void Init(TagHelperContext context)
    {
        if (Url is null)
        {
            return;
        }

        // Implementation here may need to vary.
        var path = Url.AbsolutePath;
        context.SetEmbeddedSvgPath(url);
    }
}

Now in the Razor instead of using path developers can use a url instead.

<embedded-svg url="myUrlVariable" />