SvgViewbox ignores the whitespace around the image

[jaytonic]

Hi,

I've 2 SVG that I want to overlay.

One is the main image, always displayed, taking the full height/width.
The second one(linked) is only on the bottom of the image. But when I superpose them, it gets displayed on the middle:

<Grid>
  <svgc:SvgViewbox Source="SingleExpansionCollar.svg"  />
  <svgc:SvgViewbox Stretch="None" Source="SingleExpansionCollarBottom.svg"
         Visibility="{Binding IsBottomPartVisible, Converter={StaticResource BooleanToVisibilityConverter}}"/>   
</Grid>

Is there a way to have the second image(...Bottom.svg) that takes the full space without trimming the whitespace?

CollarSingle.zip

[paulushub]

@jgrossrieder Please, can you draw an picture/illustration of how you want the final result to look like? Just render each, copy the screenshots and position with any drawing application like MS-Paint.

[jaytonic]

Here is how it should look like

[paulushub]

@jgrossrieder There are several layout combination to get that and the results depends on the uses.
Here is a sample using StackPanel and Image converters

<Window x:Class="WpfApp4.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:svgc="http://sharpvectors.codeplex.com/svgc/"
        xmlns:local="clr-namespace:WpfApp4"
        mc:Ignorable="d"
        Title="MainWindow" Height="720" Width="400">
    <StackPanel Orientation="Vertical" HorizontalAlignment="Center">
        <Image Source="{svgc:SvgImage Source=SingleExpansionCollar.svg, AppName=WpfApp4}"/>
        <Image Source="{svgc:SvgImage Source=SingleExpansionCollarBottom.svg, AppName=WpfApp4}" Margin="100 50 20 10"/>
    </StackPanel>
</Window>

Here I used the margin property on the bottom image to both constrain the position and size. The results is shown below:

The same results with SvgViewBox, removing the Stretch property on the bottom image, and using the Margin instead.

<Window x:Class="WpfApp4.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:svgc="http://sharpvectors.codeplex.com/svgc/"
        xmlns:local="clr-namespace:WpfApp4"
        mc:Ignorable="d"
        Title="MainWindow" Height="720" Width="400">
    <StackPanel Orientation="Vertical" HorizontalAlignment="Center">
        <svgc:SvgViewbox Source="SingleExpansionCollar.svg"/>
        <svgc:SvgViewbox Source="SingleExpansionCollarBottom.svg" Margin="100 50 20 10"/>
    </StackPanel>
</Window>

Or using the DockPanel as shown below:

<Window x:Class="WpfApp4.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:svgc="http://sharpvectors.codeplex.com/svgc/"
        xmlns:local="clr-namespace:WpfApp4"
        mc:Ignorable="d"
        Title="MainWindow" Height="720" Width="400">
    <DockPanel HorizontalAlignment="Center">
        <svgc:SvgViewbox Source="SingleExpansionCollarBottom.svg" Margin="200 50 20 50" DockPanel.Dock="Bottom"/>
        <svgc:SvgViewbox Source="SingleExpansionCollar.svg"/>
    </DockPanel>
</Window>

And finally, a little different layout using the Grid:

<Window x:Class="WpfApp4.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:svgc="http://sharpvectors.codeplex.com/svgc/"
        xmlns:local="clr-namespace:WpfApp4"
        mc:Ignorable="d"
        Title="MainWindow" Height="620" Width="400">
    <Grid HorizontalAlignment="Center" VerticalAlignment="Center">
        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <svgc:SvgViewbox Source="SingleExpansionCollar.svg" Grid.Row="0" Margin="10"/>
        <svgc:SvgViewbox Source="SingleExpansionCollarBottom.svg" Grid.Row="1" HorizontalAlignment="Right" 
                       Height="60" Margin="10 30"/>
    </Grid>
</Window>

[paulushub]

I guess by "whitespace" you mean some bounding box. For such, use the following properties of WpfDrawingSettings to see which works for your drawings

1. IgnoreRootViewbox, false by default
2. EnsureViewboxSize, false by default
3. EnsureViewboxPosition, true by default - might be the source of it.

[jaytonic]

Yeah, you're probably right about the bounding box, sorry.

Regarding the WpfDrawingSettings, is there a way to configure it in the XAML? I'm searching, but I'm only finding example where used on the c# side. Some of its settings(like OptimizePath) are available as properties on the SvgViewbox, but I didn't found anything for EnsureViewboxPosition

[paulushub]

Sorry, these properties are not exposed by the controls, but by the converters.
Please try using one of the converters to test if that is the solution. I will expose those properties
in the controls in the next update.

[jaytonic]

I'm struggling on the dummest thing: I can't find why I get ArgumentException here when I pass the filename of my SVG to the converter. It apparently doesn't find it.

[jaytonic]

I've managed to load the image directly from a disk path for testing after seeing it was not possible to provide a file in the resources.

I've tried the following:

            WpfDrawingSettings settings = new WpfDrawingSettings();
            settings.EnsureViewboxPosition = false;
            settings.IncludeRuntime = true;
            StreamSvgConverter converter = new StreamSvgConverter(settings);
            MemoryStream memoryStream = new MemoryStream();

            if (converter.Convert(@"F:\SingleExpansionCollarBottom.svg", memoryStream))
            {
	            BitmapImage bitmap = new BitmapImage();
	            bitmap.BeginInit();
	            bitmap.CacheOption = BitmapCacheOption.OnLoad;
	            bitmap.StreamSource = memoryStream;
	            bitmap.EndInit();
	            bottom.Source = bitmap;
            }
            memoryStream = new MemoryStream();
            if (converter.Convert(@"F:\SingleExpansionCollarTop.svg", memoryStream))
            {
	            BitmapImage bitmap = new BitmapImage();
	            bitmap.BeginInit();
	            bitmap.CacheOption = BitmapCacheOption.OnLoad;
	            bitmap.StreamSource = memoryStream;
	            bitmap.EndInit();
	            top.Source = bitmap;
            }

in xaml:

		<Image Stretch="None" Name="bottom"  />
		<Image Stretch="None" Name="top"    />

But nothing gets displayed now :/(no error either)

[paulushub]

@jaytonic I have just tried looking at the files and there is no extra spaces added. For the sample below, I added border to see the extend of the images: Maybe SvgViewbox, which is an extension of the WPF Viewbox is not the right choice of control for your needs.

<Window x:Class="WpfApp4.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:svgc="http://sharpvectors.codeplex.com/svgc/"
        xmlns:local="clr-namespace:WpfApp4"
        mc:Ignorable="d"
        Title="MainWindow" Height="420" Width="600">
    <Canvas>
        <Border BorderBrush="Red" BorderThickness="1" Canvas.Left="10" Canvas.Top="10">
            <Image x:Name="CallarBottom" Stretch="None" 
                    Source="{svgc:SvgImage Source=SingleExpansionCollar.svg, AppName=WpfApp4}"/>
        </Border>            
        <Border BorderBrush="Red" BorderThickness="1" Canvas.Left="100" Canvas.Top="100">
            <Image Stretch="None" Source="{svgc:SvgImage Source=SingleExpansionCollarBottom.svg, AppName=WpfApp4}"/>
        </Border>            
    </Canvas>
</Window>

You can convert to image using new DrawingImage(drawingGroup). Please take a look at the SvgImageBase.GetDrawing method or the sources of the controls to see how the images are loaded from resources.

[jaytonic]

@paulushub I'm not sure that we are talking about the same thing. If you open the SVG I provided, in any browser(tested chrome and edge) or in inkscape, you clearly there is some space:

Which I don't have when I convert the SVG with your library.

What am I missing?

[jaytonic]

in fact, even simplier to demonstrate my issue. With the attached svg(sorry, zipped, github doesn't allow svg upload)
SingleExpansionCollar.zip

<Border BorderBrush="Red">
	<svgc:SvgViewbox Stretch="None"  Source="SingleExpansionCollar.svg" />
</Border>

displays this:

(please ignore the things that cut the red line, it's other components)

While if I opened this image in Inkscape, I've this:

Which is what I need, for a lot of different reasons(those images gets aligned with some other connected components on the left-right. And for one components, dependings on its state, I will have differents layers of SVG to display on top of each other).

I tried the other approach you proposed:

<Border BorderBrush="Red" BorderThickness="1">
	<Image x:Name="CallarBottom" Stretch="None" Source="{svgc:SvgImage Source=SingleExpansionCollar.svg}"/>
</Border>

but it gives me exactly the same results

[paulushub]

@jaytonic OK, setting EnsureViewboxSize property to true and turning off the others, could work for your case, but I do not think combining multiple controls will produce the results you want.
Attached is a sample that directly converts the images and add them to a canvas. You can also combine both drawings into a single image and add it to the canvas.
You can try the above options to see the effect on the final drawing and layout.

WpfApp4.zip

[paulushub]

@jaytonic Sorry for the initial misunderstanding.

I will soon add support for binding Pen and Brush, but I do not think any of the current controls will meet your specific needs.
SharpVectors is designed to be modular and extensible, so you do not have to use any of the supplied controls, just copy any SvgCanvas or SvgViewbox and create a new control that will provide the specific function required by your application.
You can create a new control that has such (TopSource, BottomSource, MainSource etc) as properties

If doing a new control you meet some limitations of the library, post it as an issue. Any general feature, we add or resolve it at the library level.

[jaytonic]

@paulushub I think there is a misunderstanding: We have already using the Pen and brush with bindings, this works nicely in the UserControl we made, that extends SvgViewBox:

 public class OverlaySvgViewBox : SvgViewbox
{

	private static readonly Brush _defaultBrush = new SolidColorBrush {Opacity = 0.33, Color = Color.Blue};

	private static readonly Pen _defaultPen = new Pen
	{
		Thickness = 3.0,
		Brush = new SolidColorBrush {Opacity = 0.5, Color = Color.Blue}
	};

	public static readonly DependencyProperty BrushProperty = DependencyProperty.Register(
		"Brush", typeof(Brush), typeof(OverlaySvgViewBox), new PropertyMetadata(_defaultBrush));

	public Brush Brush
	{
		get => (Brush)GetValue(BrushProperty);
		set => SetValue(BrushProperty, value);
	}
	public static readonly DependencyProperty PenProperty = DependencyProperty.Register(
		"Pen", typeof(Pen), typeof(OverlaySvgViewBox), new PropertyMetadata(_defaultPen));

	public Pen Pen
	{
		get => (Pen)GetValue(PenProperty);
		set => SetValue(PenProperty, value);
	}
	protected override void OnSettingsChanged()
	{
		base.OnSettingsChanged();

		IList<Drawing> drawings = ((SvgDrawingCanvas)Child).DrawObjects;
		foreach (GeometryDrawing geometryDrawing in drawings.OfType<GeometryDrawing>())
		{
			Binding brushBinding = new Binding(nameof(GeometryDrawing.Brush))
			{
				Source = this,
				Mode = BindingMode.OneWay
			};
			BindingOperations.SetBinding(geometryDrawing, GeometryDrawing.BrushProperty, brushBinding);

			Binding penBinding = new Binding(nameof(GeometryDrawing.Pen))
			{
				Source = this,
				Mode = BindingMode.OneWay
			};
			BindingOperations.SetBinding(geometryDrawing, GeometryDrawing.PenProperty, penBinding);
		}
	}
}

Then only thing I'm missing is being able to set this EnsureViewBoxSize when using the SvgViewBox

[paulushub]

@jaytonic It is also a current issue: #189. I will expose the setting properties soon.

[jaytonic]

Okay, we are not blocked by the pen/brush, but on the EnsureViewBoxSIze, do you already have an issue with this?

[paulushub]

I have just checked the sources to the repository, will have to fix other issues before Nuget package.