Control para renderizar gráficos SVG?

Question

Necesito un control para renderizar gráficos SVG. Los datos vienen en forma de un objeto StreamReader. ¿Cuál es la forma más fácil de renderizar una imagen de este tipo?

En la actualidad, estoy usando PNG:

pero me gustaría algo más alta resolución. SVG sería perfecto para esto. SVG

---

muestra:

<?xml version="1.0" encoding="UTF-8" standalone="no"?> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
<!-- Generated by graphviz version 2.28.0 (20110507.0327) 
--> 
<!-- Title: G Pages: 1 --> 
<svg width="262pt" height="216pt" 
viewBox="0.00 0.00 262.00 216.00" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
<g id="graph1" class="graph" transform="scale(1 1) rotate(0) translate(4 212)"> 
<title>G</title> 
<polygon fill="white" stroke="white" points="-4,5 -4,-212 259,-212 259,5 -4,5"/> 
<!-- a --> 
<g id="node1" class="node"><title>a</title> 
<polygon fill="purple" stroke="purple" points="159.618,-186.523 133,-198.872 106.382,-186.523 116.549,-166.541 149.451,-166.541 159.618,-186.523"/> 
<polygon fill="none" stroke="purple" points="165.003,-188.397 133,-203.245 100.997,-188.397 114.139,-162.57 151.861,-162.57 165.003,-188.397"/> 
<polygon fill="none" stroke="purple" points="170.387,-190.272 133,-207.617 95.6126,-190.272 111.729,-158.598 154.271,-158.598 170.387,-190.272"/> 
<text text-anchor="middle" x="133" y="-177.3" font-family="Times New Roman,serif" font-size="14.00">a</text> 
</g> 
<!-- b --> 
<g id="node3" class="node"><title>b</title> 
<ellipse fill="none" stroke="black" cx="133" cy="-100" rx="27" ry="18"/> 
<text text-anchor="middle" x="133" y="-96.3" font-family="Times New Roman,serif" font-size="14.00">b</text> 
</g> 
<!-- a&#45;&gt;b --> 
<g id="edge2" class="edge"><title>a&#45;&gt;b</title> 
<path fill="none" stroke="black" d="M133,-158.413C133,-149.086 133,-138.069 133,-128.192"/> 
<polygon fill="black" stroke="black" points="136.5,-128.057 133,-118.057 129.5,-128.057 136.5,-128.057"/> 
</g> 
<!-- c --> 
<g id="node4" class="node"><title>c</title> 
<polygon fill="none" stroke="black" points="144.42,-41 22.2639,-41 -0.419833,-5 121.736,-5 144.42,-41"/> 
<text text-anchor="middle" x="72" y="-19.3" font-family="Times New Roman,serif" font-size="14.00">hello world</text> 
</g> 
<!-- b&#45;&gt;c --> 
<g id="edge3" class="edge"><title>b&#45;&gt;c</title> 
<path fill="none" stroke="black" d="M120.656,-83.8226C112.588,-73.903 101.855,-60.7069 92.5226,-49.2327"/> 
<polygon fill="black" stroke="black" points="95.0581,-46.8031 86.0329,-41.2536 89.6275,-51.22 95.0581,-46.8031"/> 
</g> 
<!-- d --> 
<g id="node6" class="node"><title>d</title> 
<polygon fill="none" stroke="black" points="194,-3.55271e-015 225.296,-34.5 162.704,-34.5 194,-3.55271e-015"/> 
<text text-anchor="middle" x="194" y="-19.3" font-family="Times New Roman,serif" font-size="14.00">d</text> 
</g> 
<!-- b&#45;&gt;d --> 
<g id="edge5" class="edge"><title>b&#45;&gt;d</title> 
<path fill="none" stroke="black" d="M145.344,-83.8226C154.961,-71.9983 168.365,-55.5183 178.67,-42.8489"/> 
<polygon fill="black" stroke="black" points="181.629,-44.757 185.224,-34.7906 176.199,-40.3401 181.629,-44.757"/> 
</g> 
<!-- e --> 
<g id="node7" class="node"><title>e</title> 
<polygon fill="none" stroke="black" points="254.137,-199 189.863,-199 208.407,-163 235.593,-163 254.137,-199"/> 
<text text-anchor="middle" x="222" y="-177.3" font-family="Times New Roman,serif" font-size="14.00">e</text> 
</g> 
</g> 
</svg> 

Answer 1

Cuando me había basado en el uso de IVS en mis aplicaciones de WPF, que encontró que había un par de paquetes que podrían añadirse para proporcionar esta funcionalidad, pero al final Fui con el uso de SVGs que convertí a XAML, que podrá escalar en aplicaciones WPF de la misma manera que una imagen SVG puede escalar en navegadores y demás. Si tiene acceso al código SVG (que parece que lo hace), esta puede ser una buena solución para usted.

Estos son los pasos que utilizo para lograrlo:

conversión de SVG a XAML prefiero utilizar Inkscape para los siguientes pasos.

1. Abra el SVG en un editor de imágenes (por ejemplo, Inkscape). El editor debe admitir la apertura de un SVG y guardar el SVG como un archivo XAML.
2. Desde el editor, guarde el archivo como un XAML. El archivo debe guardarse como compatible con Silverlight si se le da la opción. Cierre el editor de imágenes.
3. Si desea realizar cambios de color, abra el archivo en un editor de texto (por ejemplo, Notepad ++, Visual Studio) y busque rutas con un valor de color (busque algo como 'fill =' # 000000 '') y cámbielo a el valor de color hexadecimal deseado. Guarde el archivo y cierre el editor de texto cuando haya terminado.

una imagen de XAML Uso en un proyecto de WPF

1. clic derecho la carpeta de recursos de la imagen debe ser mantenido en (por ejemplo \ Resources \ Images), escogen la opción de añadir un archivo exisitng. Asegúrate de que el tipo de selección de archivos incluye archivos XAML. Navega hasta el archivo para usar y agrégalo.
2. Abra el panel Propiedades en Visual Studio (haga clic con el botón derecho en el archivo y haga clic en la opción 'Propiedades'). Debajo de la sección 'Avanzado' en el panel Propiedades, configure 'Crear acción' en 'Recurso' y Copie en Directorio de salida 'en' No copiar '.

La imagen se puede utilizar ahora mediante el establecimiento de la fuente de un elemento para mostrar la imagen (por ejemplo un marco) a la ruta del recurso (por ejemplo “/resources/images/.xaml”). Esto puede establecerse directamente o mediante enlace.

Ejemplo de código WPF/XAML para mostrar una imagen XAML El siguiente código muestra un ejemplo de cómo mostrar una imagen XAML agregada utilizando los pasos anteriores. Este código escalará la imagen para llenar el contenedor al que se agrega. La fuente de la imagen se suministra a través del enlace utilizado para la fuente del elemento Frame. Esto se puede reemplazar con una cadena de la ruta de la imagen (que es lo que se proporciona a través del valor de enlace).

<Viewbox Stretch="Uniform" 
     Margin="4,4" 
     VerticalAlignment="Center"> 
      <Frame Source="{Binding ImageSource}" 
        NavigationUIVisibility="Hidden"/> 
</Viewbox> 

Un ejemplo de la cadena de ruta es:

/resources/images/<file-name>.xaml 

Si la imagen se encuentra en un DLL y se utiliza en la misma DLL, la cadena de ruta deberá incluir más información utilizando la siguiente formato:

/<AssemblyName>;component/resources/images/<file-name>.xaml