Don’t know why I didn’t think about SVG images before…It’s GREAT!
Look at the difference! 
[quote=156469:@Albin Kiland]Don’t know why I didn’t think about SVG images before…It’s GREAT!
Look at the difference!
[/quote]
This is amazing. Thank you for sharing the tip.
Which SVG editor would you recommend to prepare images ?
Adobe Illustrator is $19.99/mo if you need that, but I’ve found DrawBerry(Free) quite good for the simple task of SVG icons 
Download a free SVG icon and open it up to get started is a tip
Pixelmator should have a vector mode it seems but I can’t find it in the version I have.
Pixelmator can work with vector based shapes and figures but cannot export them. You have to pixelize them first. I am using Affinity Designer instead. A pretty cool and feature-rich vector based app, which reminds me to good ol’ Freehand 5
Didn’t know about that one. Seems like a good price!
I started using Affinity Designer recently too, gets a thumbs up from me as it has allowed me to drop my Creative Cloud subscription and save a lot of money.
Hey Albin, I’ve started to implement your solution, but I’m a little stuck as my SVG isn’t resizing to the bounds of the control and is keeping its default width/height of 2048px instead of say 100px.
The SVG is there OK, but the only way I’ve found to actually get it to fit the WebImageView is by manually updating the img element’s properties in the web inspector!
Would you mind sharing what magic you use to ensure the SVG resizes to the WebImageView’s size?
How are you serving the images to your app?
As I’m doing it through App.HandleSpecialURL I can edit the XML file prior to serving it.
Inside you can find some properties to alter and then serve the image:
width="512px" height="512px" viewBox="0 0 512 512" enable-background="new 0 0 512 512"Otherwise you could create the SVG image in the size it’s needed, maybe?
[quote=156697:@Albin Kiland]How are you serving the images to your app?
As I’m doing it through App.HandleSpecialURL I can edit the XML file prior to serving it.
Inside you can find some properties to alter and then serve the image:
width="512px" height="512px" viewBox="0 0 512 512" enable-background="new 0 0 512 512"Otherwise you could create the SVG image in the size it’s needed, maybe? :)[/quote]
Ah, OK, I’ll have a crack at that.
I’m using the new App.HandleURL and picking the specified asset from a pre-populated dictionary of assets, so it wouldn’t be a problem to pass the required width and height and replace them in the source data. Thanks for the hint.
I should be able to cache an App wide size specific version and re-use it to reduce memory footprint too as there’ll only be so many size variations in my app. Beats generating a whole bunch of pngs at varying sizes, at least during development anyway.
Thanks again for your help Albin.
Finally got some time to have a go at fixing my issue with scaling the svg, using Albin’s idea of altering the svg source as it is served.
The key was viewBox, the svg I exported from Affinity Designer did not have a viewBox attribute on the svg tag, once I added that and changed the width and height to what I needed as I served the file it worked.
Turns out the next version of Affinity Designer (currently in beta) now includes the viewBox attribute in exported svg files, with the width and height attributes set to “100%” so that when used in a HTML img tag you can simply change the width and height to what you need there. So I switched to the Affinity Designer beta and re-exported my vector icon as svg and simply replaced the width="100%" and height="100%" attributes with things like width="128px" and height="128px" on the fly when serving assets from my HandleURL event when parameters for width and height are passed in.
Works like a charm, thanks again Albin.
Hi,
If you use HandleURL there will always be a HTTP 404 error. I use svg pictures the following way:
I put the XML data to a constant. When the App fires up it generates a WebFile out of this XML and saves it to a property.
[code]dim wf As new WebFile
wf.MIMEType = “image/svg+xml”
wf.ForceDownload = false
wf.Filename = “MyPicture.svg”
wf.Data = kMyPicture
MyPictureProperty = wf[/code]
Then I always have got access to this property, for instance in the Open event of the WebImageView:
me.URL = MyPictureProperty.URLYou want to return True at the end of HandleURL.
Hi Michel,
I already did this and it worked. But if I dive deeper and start the developer console of Safari I see it reporting the errors ‘behind the scenes’. With the WebFile everything is fine.
[quote=159722:@Robert Peroutka]Hi Michel,
I already did this and it worked. But if I dive deeper and start the developer console of Safari I see it reporting the errors ‘behind the scenes’. With the WebFile everything is fine.[/quote]
HandleURL is not necessary with a webfile indeed.
please excuse me, apparently I haven’t been very precise in describing the issue, because I’m not a native speaker ;).
I tried both ways:
- HandleURL (of course with returning true, no WebFile)
- WebFile version
For me the 2nd version seemed to be better.
I agree, it is far more elegant.
[quote=155505:@Albin Kiland]Fyi. I ended up using SVG images instead.
They are XML based vector graphics and look amazing on a retina display without any hassle :)[/quote]
HOW?
How would I paint a .svg file on a webcanvas?
Or in what other way can one make a svg file appear, for instance on a webcontainer?
Never mind, I overlooked Albin’s hint: “As I have a Stand Alone app that is not sure to have access to a web server like apache the app serves the images to itself using HandleSpecialURL.”
I don’t. I created an SVGViewer(it were on here before I pulled it for an issue). It displays SVG images in a control based on an HTMLViewer. The files are loaded into a dict in App that are then served in a WebFile to be displayed.
It supports resize and change of color on single colored SVGs.
But it’s currently not available. Sorry.
If you have a .svg file you can just shove it into an <img> tag.