Summer just ended a month ago, business is taking over, keeping must of us very busy. At Vapolia we took time to improve the best existing svg library for Xamarin: XamSvg.
PCL profile change
Technology is like a sand lake, it always changes. Netstandard is replacing our old good PCL profiles. Netstandard may be the new nuget heaven, and in order to be compatible XamSvg has to drop its PCL profile containing Silverlight. You can learn more about netstandard here.
The current prerelease version of XamSvg does not support Silverlight anymore. Silverlight is now dead technology - ok it has never been supported by XamSvg. But historically Xamarin Forms required it. From now on you won't be able to install or update XamSvg in a PCL library whose profile targets Silverlight. This is the case of the current default Xamarin Forms PCL project created with the Xamarin wizard.
To remove silverlight from a PCL library, uncheck Silverlight in the properties panel of this library. This is called retargeting a PCL. If Visual Studio complains that it can't switch the PCL profile because nugets are installed, move away the package.config file first, uncheck Silverlight, then put back the package.config file. In most case it will work perfectly and you'll be able to install the latest version of XamSvg. After retargeting a PCL library you may update all its nugets so they reference the correct libraries for the new pcl profile. This powershell command can help you in the task:
Update-Package -Reinstall -ProjectName YourPCLProjectName
Have you ever hit this case where a SVG is not displaying and you don't know why ? This is a rare but common issue, which can be related to forgetting to set EmbeddedResource on the build action of the svg file. To find out what's happening in the XamSvg library - if it can not find the svg resource for example - you can now activate logging. XamSvg will log what it tries to load and display, where and at what size. You can easily check that your svg bounds are correct - ie are not 0 - which is also the most common problem you may have. Also read the chapter "Removing 100% width/height" below for more info about this issue.
To activate logging, set TraceEnabled to true. This is a global flag. There is no way to activate logging for a specific svg currently.
Code for Xamarin Forms:
DependencyService.Get<ILogger>().TraceEnabled = true;
XamSvg.Shared.Config.NativeLogger = DependencyService.Get<ILogger>();
Code for Xamarin not Forms:
XamSvg.Shared.Config.NativeLogger.TraceEnabled = true;
You can of course implement the logger interface yourself, and override the Forms dependency or directly the NativeLogger for non Forms projects.
New icon source
in addition to flaticon.com, icomoon.io and icones.pro: google material icons are all available as svg files !
Check them, some are great.
SVG x, y, width, height and viewbox
These svg properties determines what part of the svg is displayed.
SVG are like images: they can have a width and a height. But they are vector files: this width/height does not have any meaning. It represents only the density - or the scale - of points in this svg, knowing that the mathematical value of any svg coordinate is a float with the float's limitations of 7.2 significant digits max.
You can think of this width/height as the viewport size, starting at point x,y if specified. The svg standard allows setting percentages as witdh/height values: the svg renderer should try to fill its drawing space using the given percentage. For XamSvg this is already done by the view contraints you set in Forms, iOS or android layouts. So width/height percentage attributes must be removed, otherwise you'll hit strange resizing effects or even nothing displayed at all.
« x/y/width/height attributes should be removed and replaced by a viewbox »
The good news is that this can be done automatically by inkscape. See the chapter about it below.
You should have only a viewbox attribute, no x/y/with/height. XamSvg uses this viewbox to compute the drawing zone and the svg width/height ratio. Knowning this ratio is important: you can set either the width or the height and the XamSvg control will resize to have the correct ratio. Note that dimension computation is done asynchronously: if you're using dynamic row heights in iOS the svg size may not be fully available at the time iOS computes the cell's height. If you fall into this issue, either set both dimensions or disable asynchronous operation for this svg using the async parameter (also available in xamarin forms and xamarin android layouts).
Cleaning and Optimizing SVG files
SVG files are text xml files describing an image as a series of mathematical operations using a normalized text language.
XamSvg uses only system accelerated methods for all its drawing operations. For this, it translates the svg language into the final drawing using this serie of operations:
- xml parsing
- mathematical transformations
- platform native system calls mapping
- native drawing view
Xml is a wordy language, and svg has many ways of expressing the same thing. To optimize svg rendering, you should have the shorter version of the xml.
« To optimize svg rendering, you should have the shorter version of the xml »
For example, the style attribute can completly be replaced by normal xml attributes. The style attribute uses the CSS language and requires an internal CSS parser, which is much slower than raw xml parsed quickly by the optimized microsoft xml library.
Another example are empty "g" nodes. A g node represent a group ot items which share the same attributes. Empty g nodes are redondant and can be safely removed. Some websites like flaticons adds lots of empty g nodes at the end of all its svg files.
There are also xml comments. All Adobe tools (Photoshop and Illustrator) save xml files with a comment header telling you that the file was created by Adobe. Do you really need this ? To help parsing remove it !
And the last one: DTD header line. It is not needed and can be safely removed. A DTD describes the schema of an xml file. In our case it describes the schema of an svg file. But all svg parsers already know they are parsing an svg file. So just remove it.
The good news is that all this can be done automatically by inkscape. See below.
Cleaning and Optimizing SVG files using Inkscape 0.92pre1
Open your svg file in Inkscape. Make sure the bounding box is around your drawing. You can automatically adjust the bounding box by using File/Document Properties, in /Custom Size/Resize Page To Content/"Resize page to drawing or selection" button.
Note: don't use previous versions of inkscape, export to optimized svg file is buggy.
To save your svg, use File/"Save As" and select "optimized svg" in file types.
You will be prompt with a 3 tab option panel. Check and uncheck the options as in the images below:
Tab "Svg Output":
After saving your optimized svg, make sure it still displays correctly using the excellent Windows Explorer SVG viewer extension. This is important, as some inkscape versions are buggy and you may loose your svg. Note that in rare cases this extension displays black rectangles. To be really sure of the result, open the svg file in Edge or Internet Explorer. If any of these succeed, XamSvg should succeed.
In the next blog entry, i'll give you the new code to succesfully use xamsvg for icons in toolbars on both android and ios // Xamarin Forms.
If this article was helpful, even a little, please tap the box below !
Have a great day,