SVG w WPF: wybierz renderer lub rysunek XAML

SVG otwiera się w przeglądarce, ale podanie jego nazwy pliku w kontrolce Image w WPF nie zapewnia takiego samego procesu renderowania. Zacznij od wyboru tego, co aplikacja faktycznie otrzyma: SVG przetwarzany przez bibliotekę, natywne obiekty rysunkowe WPF czy eksport rastrowy.

Wbudowane kodeki obrazów WPF obejmują PNG i JPEG, ale na ich liście nie ma SVG. Kontrolka Image może też wyświetlać DrawingImage, więc wyświetlanie grafiki wektorowej nie musi oznaczać bezpośredniego wczytywania pliku SVG. Microsoft opisuje je jako osobne sposoby korzystania z obrazów i rysunku jako źródła obrazu.

Ten poradnik wykorzystuje autorską ikonę zakładki, aby pokazać ten wybór na konkretnym przykładzie. Poniższe SVG i XAML zostały napisane ręcznie; nie są testem porównawczym konwerterów ani zrzutem z aplikacji Windows.

Wybierz reprezentację, zanim zmienisz plik

Te wybory dotyczą obiektu wyświetlanego przez aplikację. Nie rozstrzygają, czy projektant powinien zachować edytowalny plik źródłowy SVG. Zachowaj go, nawet jeśli aplikacja otrzymuje PNG.

Najpierw wypróbuj mały natywny DrawingImage

W przypadku prostej ikony ręcznie przygotowany rysunek daje przydatny punkt odniesienia bez wprowadzania parsera SVG. Microsoft pokazuje strukturę: ustaw Image.Source na DrawingImage, a następnie przypisz rysunek do jego właściwości Drawing. Poniższy autorski przykład stosuje ten udokumentowany wzorzec.

Oto projekt SVG: turkusowa zakładka i osobne koralowe koło. Zapisz go jako bookmark.svg, jeśli chcesz mieć źródło do porównania w edytorze.

<svg xmlns="http://www.w3.org/2000/svg" width="120" height="80"
     viewBox="0 0 120 80">
  <path fill="#176B64" d="M20 12 H64 V68 L42 54 L20 68 Z"/>
  <circle fill="#EC785E" cx="92" cy="24" r="10"/>
</svg>

Umieść tę kontrolkę Image wewnątrz kontenera układu istniejącego okna WPF, na przykład Grid:

<Image xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
       Width="120" Height="80" Stretch="Uniform">
  <Image.Source>
    <DrawingImage>
      <DrawingImage.Drawing>
        <DrawingGroup>
          <GeometryDrawing Brush="Transparent"
                           Geometry="M0,0 H120 V80 H0 Z"/>
          <GeometryDrawing Brush="#176B64"
                           Geometry="M20,12 H64 V68 L42,54 L20,68 Z"/>
          <GeometryDrawing Brush="#EC785E">
            <GeometryDrawing.Geometry>
              <EllipseGeometry Center="92,24" RadiusX="10" RadiusY="10"/>
            </GeometryDrawing.Geometry>
          </GeometryDrawing>
        </DrawingGroup>
      </DrawingImage.Drawing>
    </DrawingImage>
  </Image.Source>
</Image>

Dwa widoczne obiekty rysunkowe opisują zakładkę i koło oddzielnie. Przezroczysty prostokąt wyznacza pełne granice rysunku w tym przykładzie, o wymiarach 120 na 80, w tym pusty margines wokół grafiki. Nie przycina późniejszej geometrii ani nie zmienia XAML w dokument SVG.

Współrzędne są świadomymi decyzjami podjętymi podczas tworzenia projektu. Porównaj oba fragmenty: zakładka używa tych samych punktów, a koło ma ten sam środek i promień. To niewielkie ręczne przełożenie, które możesz sprawdzić, a nie przepis na odwzorowanie każdej funkcji SVG w XAML.

Pliki źródłowe zostały sprawdzone pod kątem poprawności XML, ale ten przykład nie został zbudowany ani wyrenderowany w aplikacji WPF w Windows. Przetestuj go w swoim projekcie, zanim zaczniesz go używać.

Sprawdź granice i pędzle, zanim przygotujesz rysunek do ponownego użycia

Zacznij od podanego rozmiaru. Upewnij się, że dolne wycięcie zakładki pozostaje widoczne, a koło jest oddzielone od zakładki. Następnie wypróbuj szerszy lub wyższy obszar układu. Stretch="Uniform" zachowuje proporcje podczas dopasowywania do dostępnego obszaru, zgodnie ze wskazówkami Microsoft dotyczącymi rozciągania obrazów.

Zmień wartość Brush z koloru koralowego na inny kolor. To celowa edycja natywnego obiektu rysunkowego; nie dowodzi, że dowolne zaimportowane elementy SVG udostępnią równie wygodne możliwości sterowania.

Jeśli rysunek wygląda na przesunięty względem środka, porównaj jego granice z viewBox pliku SVG i pustymi marginesami. Poprawna sylwetka nadal może zajmować inną część przydzielonego obszaru układu. Zachowaj ten prosty punkt odniesienia podczas wprowadzania docelowej grafiki.

Użyj renderera, gdy SVG pozostaje danymi wejściowymi

Gdy ręczne utrzymywanie natywnej geometrii jest niepraktyczne, sprawdź bibliotekę, która wprost obsługuje odczyt SVG dla WPF. Pakiet SharpVectors.Wpf udostępnia komponenty do parsowania, konwersji i wyświetlania SVG. Strona pakietu jest właściwym miejscem do sprawdzenia aktualnej wersji, docelowych frameworków i zależności przed dodaniem go do projektu.

Dokumentacja wprowadzająca SharpVectors opisuje konwersję do obiektów rysunkowych WPF i przykłady wyświetlania za pomocą kontrolek obrazu. To inny sposób niż próba zdekodowania pliku SVG przez zwykły mechanizm obsługi bitmap na podstawie podanej nazwy pliku.

Użyj autorskiej zakładki jako pierwszego pliku wejściowego biblioteki, a następnie zastąp ją swoją właściwą grafiką. Sprawdzaj te kwestie osobno:

1. Wczytywanie: czy wybrany przykład odnajduje plik lub zasób aplikacji w Twoim projekcie?
2. Reprezentacja: czy API zwraca obiekty rysunkowe, generuje XAML czy renderuje bitmapę odpowiednio do Twojego zastosowania?
3. Wygląd: czy wycięcie, oddzielne koło, kolory i puste marginesy są poprawne w uruchomionej aplikacji?
4. Wdrożenie: czy wynik wymaga zestawu biblioteki używanego w czasie wykonywania lub innych zasobów na komputerze docelowym?

Korzystaj z przykładów zgodnych z zainstalowaną wersją. SharpVectors dokumentuje ustawienie IncludeRuntime, oznacza TextAsGeometry jako przestarzałe i zwraca uwagę na zmiany przestrzeni nazw w wersji 2.0. To powody, aby przejrzeć stare fragmenty kodu przed skopiowaniem ich ustawień, a nie zakładać, że jedna konfiguracja konwersji będzie odpowiednia bezterminowo. Dokumentacja SharpVectors

W przypadku logo z napisami sprawdź zarówno rzeczywisty wynik docelowy, jak i źródło. Nasz poradnik dotyczący zmian fontów w SVG wyjaśnia różnicę między tekstem zależnym od fontów a napisami zachowanymi jako obrysy liter. Konwersja tekstu może zmienić zakres późniejszej edycji, więc zachowaj oryginalny plik projektu.

Nie przenoś SvgImageSource z niewłaściwej platformy XAML

Szukanie rozwiązania tego problemu może doprowadzić Cię do dokumentacji SvgImageSource firmy Microsoft. Dokumentacja klasy UWP umieszcza ten typ w Windows.UI.Xaml.Media.Imaging. To inne API niż kontrolki i klasy multimedialne WPF z System.Windows.

Sprawdź platformę wskazaną w przykładzie, zanim dodasz przestrzeń nazw lub pakiet. Podobny zapis XAML nie sprawia, że źródło obrazu UWP lub WinUI staje się wbudowaną funkcją WPF. Rozwiązanie dla innej platformy może być tam poprawne, a mimo to nie pasować do Twojego projektu aplikacji desktopowej.

Zdecyduj, czy PNG wystarczy

Eksport do PNG jest rozsądnym sposobem dostarczenia grafiki, gdy znasz wymagane rozmiary, a aplikacja nie musi edytować geometrii. Wyeksportuj grafikę w tych rozmiarach, porównaj przezroczyste krawędzie na rzeczywistym tle i sprawdź największy rozmiar, w jakim będzie wyświetlana. Zwiększenie rozmiaru bitmapy w układzie nie odtwarza ścieżek źródłowych.

Sprawdź też zawartość SVG, zanim poświęcisz czas na bibliotekę renderującą. Jeśli plik tylko osadza obraz rastrowy, zaimportowanie jego otoczki nie zamieni tego obrazu w edytowalną geometrię. Poradnik o SVG z osadzonym obrazem rastrowym pokazuje, co sprawdzić. W przypadku kolekcji ikon stosuj te same kontrole marginesów i sylwetek w całym zestawie; nasz proces przygotowywania ikon interfejsu opisuje ten etap pracy nad grafiką.

Jeśli zakładka lub logo zachowały się tylko jako PNG lub JPG, proces przekształcania obrazu w grafikę wektorową w PerfectVector może pomóc przygotować edytowalny plik SVG do oceny. Sprawdź odtworzoną sylwetkę, wycięcie i oddzielne detale, zanim wybierzesz sposób dostarczenia grafiki do WPF. Wektoryzacja przygotowuje grafikę; nie instaluje renderera WPF ani nie gwarantuje konwersji do natywnego XAML.

Szerszy poradnik o wektoryzacji obrazów wyjaśnia ten etap odtwarzania źródła. Gdy źródło jest gotowe, kontrole działania aplikacji nadal trzeba przeprowadzić w WPF.

Często zadawane pytania

Czy kontrolka Image w WPF może bezpośrednio wczytać plik SVG? Udokumentowane wbudowane kodeki obrazów WPF nie obejmują SVG. Użyj biblioteki obsługującej SVG, dostarcz natywne obiekty rysunkowe przez DrawingImage lub podaj obsługiwany format rastrowy, taki jak PNG.

Czy DrawingImage jest tym samym co plik SVG? Nie. DrawingImage wyświetla obiekty rysunkowe WPF. Biblioteka SVG może tworzyć takie obiekty albo możesz przygotować je bezpośrednio, jak w przedstawionym tu małym przykładzie.

Czy mogę użyć przykładu UWP SvgImageSource w WPF? Nie traktuj go jako wbudowanego API WPF. Dokumentacja UWP dotyczy innej przestrzeni nazw i platformy; wybierz kod i zależności odpowiednie dla swojej aplikacji.

Czy konwersja SVG do XAML zachowa każdy efekt? Nie zakładaj, że tak będzie. Sprawdź udokumentowane możliwości konwertera i obejrzyj grafikę w aplikacji docelowej, zwracając uwagę na tekst, granice, oddzielne kształty i efekty.

Źródła

1. Microsoft — WPF Imaging Overview — Wbudowane formaty bitmapowe i zachowanie podczas rozciągania obrazów.
2. Microsoft — Use a Drawing as an Image Source — Natywny DrawingImage i struktura obiektów rysunkowych.
3. SharpVectors — Getting Started — Konwersja do rysunków WPF, ustawienia środowiska wykonawczego i udokumentowane zastrzeżenia dotyczące migracji.
4. NuGet — SharpVectors.Wpf — Aktualne dane identyfikujące pakiet i informacje o zgodności.
5. Microsoft — UWP SvgImageSource Class — Rozgraniczenie platformy i przestrzeni nazw dla często mylonego API.

Wybierz jeden sposób obsługi grafiki w WPF i porównaj mały projekt, zanim zastąpisz cały zestaw zasobów. Jeśli grafika rastrowa wymaga odtworzenia, przygotuj edytowalny plik SVG do oceny, sprawdź kształty, a następnie przetestuj wybraną reprezentację w swojej aplikacji.