0915-201412 XamSvg nuget package live

A nuget package is now available which demontrates the incredible capabilities of SVG vector images and its independance with resolution.

Demo step by step
Create a new Android project
Add the XamSvg nuget package to the project
Modify the default layout to match this one:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:local="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >
        <XamSvg.SvgImageView
            local:svg="@raw/twitter"
            local:colorMapping="00000000=ffffffff"
            android:layout_width="wrap_content"
            android:layout_height="match_parent" /> 

</RelativeLayout>
Note that Android is case sensitive and accepts only lower case ids. "twitter" here is an id: do not specify .svg extension.

Create a folder called "raw" under the existing "resources" folder.
Download and add twitter.svg to this folder (download it from http://www.flaticon.com/free-icon/social-twitter-bird-symbol_8800)
Compile and run.

Note the colorMapping which maps transparent color to opaque white. Lots of SVG don't specify any color, this is the case of this one. By default missing colors are mapped to a default color in the svg standard, which is black in Internet Explorer. In XamSvg this default color is transparent to prevent other artifacts. You can edit svg colors by hand in the svg file or by using Inkscape (see below).

Downloads

You can find the XamSvg nuget package on nuget or here https://www.nuget.org/packages/Softlion.XamSvg.Free/1.2.0.1 and the full version along with demo projects and documentation there https://components.xamarin.com/view/xamsvg

You have tons of svg ready to use at http://www.flaticon.com/

SVG Compatibility

To maximize SVG compatibility for XamSvg, download and install Inkscape https://inkscape.org which is a free editor and optimizer for SVG files.
Open an svg file in it,
In File/Properties, click resize page to content then the button so the bounding box is set around the drawings. This box is used by XamSvg to determine the dimensions of the SVG.
Save as "Optimized SVG" then check only "activate viewbox", "delete comments", "delete metadata", "convert CSS to xml", "optimize colors", and select "none" as indent char.

Open the optimized svg in Internet Explorer. It should display fine.
Well done, the SVG should display correctly in XamSvg and you'll be able to use automatic sizing !


Feedback and Knowledge Base