1. Home
  2. Docs
  3. Getting Started
  4. Quickstart: Uno

Quickstart: Uno

Install

dotnet add package Svg.Controls.Skia.Uno

Render a packaged asset

<Page
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:svg="using:Uno.Svg.Skia">
  <svg:Svg Path="/Assets/__AJ_Digital_Camera.svg"
           Stretch="Uniform"
           EnableCache="True" />
</Page>

Render inline SVG text

<svg:Svg Source="{x:Bind InlineSvg}" Height="140" />

public string InlineSvg =>
    """
    <svg width="120" height="120" xmlns="http://www.w3.org/2000/svg">
      <circle cx="60" cy="60" r="40" fill="#2563eb" />
    </svg>
    """;

Reuse one SvgSource

<Page.Resources>
  <svg:SvgSource x:Key="TigerSource" Path="/Assets/__tiger.svg" />
</Page.Resources>

<svg:Svg SvgSource="{StaticResource TigerSource}" Height="220" />

Apply runtime CSS

MySvg.CurrentCss = ".accent { fill: #ef4444; }";

Interactive features

The Uno control also exposes:

  • Wireframe
  • DisableFilters
  • Zoom
  • PanX
  • PanY
  • ZoomToPoint(...)
  • TryGetPicturePoint(...)
  • HitTestElements(...)

Next steps