title: Scaling complex SVG paths in WPF XAML
body: <p>I have here a set of inordinately complex scalable vector graphic icons which were created using Illustrator, and imported into my WPF app using the Expression Blend and Inkscape hack:</p>
  
  <p><a href="https://stackoverflow.com/questions/18624070/convert-svg-to-xaml/18624512">Convert SVG to XAML</a></p>
  
  <p>I tried various method of importing the original icons, this is above approach is the only way they would import correctly in my app. </p>
  
  <p>So now I need to make my app work on a new smaller resolution, and even when in a ViewBox these icons will not scale.</p>
  
  <p>If I remove the width/height attributes it ruins the SVG and the icon essentially disappears. </p>
  
  <pre><code>  &lt;Style x:Key="BenefitsIconFlexBox" TargetType="{x:Type Viewbox}"&gt;
      &lt;Setter Property="MaxHeight" Value="240"/&gt;
      &lt;Setter Property="Height" Value="201"/&gt;
      &lt;Setter Property="Margin" Value="10,0,0,10"/&gt;
  &lt;/Style&gt;
  </code></pre>
  
  <p>...</p>
  
  <pre><code>        &lt;Viewbox Style="{StaticResource BenefitsIconFlexBox}"&gt;
              &lt;Canvas Width="213.333" Height="213.333" Clip="F1 M 0,0L 213.333,0L 213.333,213.333L 0,213.333L 0,0" UseLayoutRounding="False"&gt;
                  &lt;Path Canvas.Left="0" Canvas.Top="3.05176e-005" Stretch="Fill" Fill="#FFEDEDED" Data="F1 M 213.333,106.667C 213.333,165.579 165.579,213.333 106.667,213.333C 47.7547,213.333 0,165.579 0,106.667C 0,47.7547 47.7547,3.05176e-005 106.667,3.05176e-005C 165.579,3.05176e-005 213.333,47.7547 213.333,106.667 Z "/&gt;
                  &lt;Canvas Canvas.Left="60.588" Canvas.Top="46.828"&gt;
                      &lt;Path Canvas.Left="17.276" Canvas.Top="0" Stretch="Fill" Fill="#FF424242" Data="F1 M 46.0787,0C 30.1827,0 17.276,13.0107 17.276,28.7973L 17.276,40.3173L 28.7973,40.3173L 28.7973,28.7973C 28.7973,19.308 36.584,11.5213 46.0787,11.5213C 55.5733,11.5213 63.36,19.308 63.36,28.7973L 63.36,40.3173L 74.8813,40.3173L 74.8813,28.7973C 74.8813,13.0107 61.9747,0 46.0787,0 Z "/&gt;
                  &lt;/Canvas&gt;
                  &lt;Path Canvas.Left="60.588" Canvas.Top="87.1454" Stretch="Fill" Fill="#FFFB8C00" Data="F1 M 141.229,162.136L 72.104,162.136C 65.812,162.136 60.588,156.907 60.588,150.615L 60.588,98.6667C 60.588,92.3747 65.812,87.1454 72.104,87.1454L 141.333,87.1454C 147.625,87.1454 152.855,92.3747 152.855,98.6667L 152.855,150.505C 152.745,156.907 147.625,162.136 141.229,162.136 Z "/&gt;
                  &lt;Path Canvas.Left="98.0267" Canvas.Top="116.052" Stretch="Fill" Fill="#FFC76E00" Data="F1 M 115.307,124.693C 115.307,129.495 111.469,133.333 106.667,133.333C 101.864,133.333 98.0267,129.495 98.0267,124.693C 98.0267,119.896 101.864,116.052 106.667,116.052C 111.469,116.052 115.307,119.896 115.307,124.693 Z "/&gt;
              &lt;/Canvas&gt;
          &lt;/Viewbox&gt;
  </code></pre>
  
  <p>I am open to using transforms or some c# logic to do the resolution math and scaling, but would prefer to use scaling with the view box. </p>
  
  <p>I am not sure why the SVG goes gonzo when the dimensional data is removed, but surely this is the problem. I feel like if I can get rid of the height and width attributes this would scale.</p>
  
  <p>Any suggestions are welcomed! Thank you. </p>