B4A Library ioxSVG scalable vector graphics for Android

Version 0.95 Still in Beta​

It's time to give something back to the community.

Scalable Vector Graphics (SVG) is an XML-based vector image format for two-dimensional graphics. The SVG specification is an open standard developed by the World Wide Web Consortium (W3C) since 1999. SVG images are defined in XML text files.

All major modern web browsers (including Mozilla Firefox, Internet Explorer, Google Chrome, Opera, and Safari) have at least some degree of SVG rendering support. But the Android's Team decided to not add support for this standar.

Since its a verctor image format It can be resized without loosing quality. You cand create a single image and use it at any resolution.

Currently there is another SVG Library by agraham but the original code it's not a good implementation of the SVG standar. It can't render the Acid Test for SVG, nor most of the SVG Test Suite from w3.org




2014/09/14 New Version 0.95

Added a new function to alter the "preserveAspectRatio" property of the SVG. You can see different behaviors on the attached images.

Please see the proyect's source code for the ussage.


You can read about the property on the SVG Attribute reference:

https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/preserveAspectRatio




Like if you found tis lib usefull.

 

[bluejay]

Version 0.9 Still in Beta​

It's time to give something back to the community.

Scalable Vector Graphics (SVG) is an XML-based vector image format for two-dimensional graphics. The SVG specification is an open standard developed by the World Wide Web Consortium (W3C) since 1999. SVG images are defined in XML text files.

All major modern web browsers (including Mozilla Firefox, Internet Explorer, Google Chrome, Opera, and Safari) have at least some degree of SVG rendering support. But the Android's Team decided to not add support for this standar.

Since its a verctor image format It can be resized without loosing quality. You cand create a single image and use it at any resolution.

Currently there is another SVG Library by agraham but the original code its not a good an implementation of the SVG standar. It can render the Acid Test for SVG and most of the SVG Test Suite from w3.org


View attachment 26519 View attachment 26520 View attachment 26521

 

[bluejay]

Some quick feedback.

The renderer seem very good, this should become a very good library.

Unfortunately many SVG files fail in the example program crashes due to a 'JavaObject' error, especially SVG files generated by Inkscape.

If I comment out the line that gets the file properties then all the files I tested seem to render just fine. The largest SVG file I tested was 455K bytes. Some more work needed on the library code getting for file properties. It should not crash if it does not understand something or if a field is missing.

Bluejay

 

[Wembly]

Thanks this library appears to work much better with gradients than the other SVG library which is available.

One question though does this library support re-sizing of the vector image? If I change the dimensions of the containing image view the SVG image is not scaled accordingly just remains the original size.

Please can you advise what I'm doing wrong?

The svg file I was using was created in Inkscape and did get the same Java Object errors as previous post in the demo apk. I removed the line output svg properties and the image displayed correctly but not re-sized as desired.

 

[ivan.tellez]

Hi, to change the rendered size, you have to play with:

setDocumentWidth
setDocumentHeight

Also with:

SetDocumentViewBox

Just play around with the functions and see the different results.

 

[Wembly]

Thanks for the reply.

The setDocumentWidth & setDocumentHeight methods are not available in the B4A IDE by default.

I did notice in the library XML file these methods are set to hidden - which I changed so I could see them in the IDE, but using these methods did not seems to make any difference. I did this yesterday while playing around.

I will look at this again today and feedback my results.

 

[Wembly]

I've just tried the methods you suggested and again not seeing any scaling being applied.

This is the code from my app:

Dim svgaf As ioxSVG
Dim callCanvas As Canvas

imvCall.Height = 300dip
imvCall.Width = 300dip

callCanvas.Initialize(imvCall)
callCanvas.DrawColor(Colors.red)

svgaf.Initialize("tiger.svg")
svgaf.setDocumentWidth(imvCall.Width)
svgaf.setDocumentHeight(imvCall.Height)
svgaf.SetDocumentViewBox(0,0,imvCall.Width,imvCall.Height)
svgaf.RenderToCanvas(callCanvas)

I re-sized the original tiger.svg to 50x50px in Inkscape and now attempting to re-size to 300x300dip.

Note the area in red is the size of the imageview, the result is in the screenshot below - please advise if I'm doing something stupid?

This library will be perfect if I can get this re-size to work.

 

[ivan.tellez]

The view box is like a "window" to see the content of the SVG, foe example:

<svg width="800" height="400" viewBox="0 0 800 400">
'This view box covers the entire page.

<svg width="800" height="400" viewBox="0 0 400 200">
'This view box covers half the page starting in the upper right hand corner.

so, maybe using a smaller view box.

 

[Wembly]

Have you got re-sizing to work with this library and if so do you have any examples?

Thanks.

 

[Deleted member 30048]

Hello, I've test the library and it's awesome. Is possible to use this library and .svg files to draw a button with their states (pressed, normal, disabled)?. I know how to do it with images and StateListDrawable but not with vector images.

Thanks

 

[ivan.tellez]

Have you got re-sizing to work with this library and if so do you have any examples?
Thanks.

Actually, the sample proyect resizes the example SVG to the ImageView´s size. Try your code with the sample SVGs. InkScape it has nor really a good support for SVG. The better results are made with Illustrator.

Hello, I've test the library and it's awesome. Is possible to use this library and .svg files to draw a button with their states (pressed, normal, disabled)?. I know how to do it with images and StateListDrawable but not with vector images.

Thanks

YES!

Actually that was the main purpose of this lib for me. Yo cant use the vector directly in the StateListDrawable, but, its easy, first draw the vector to a bitmap´s canvas, then use the bitmap in the StateListDrawable.

 

[Wembly]

Quick update - all working now!

I did as you suggested and used a file which had not been created by Inkscape but only Illustrator.

In addition I used the methods (descriptions need updating - as they state the methods only return values):

DocumentWidth
DocumentHeight

​

Inkscape images will not re-size at all but Illustrator files re-size correctly.

My SVG also had text in the image - when created by Inkscape the library did not show the text in the correct position where as with an Illustrator file the text appeared where it should.

So it does appear there is compatibility issues between Inkscape and this version of the library. I would also recommend using Illustrator for now but my primary app is Inkscape and alot of other people would prefer Inkscape since its free.

Anyways thanks I'm all good now and the library is definitely brilliant!

 

[Wembly]

...thought I was all sorted - but...

Re-size is working but only re-size to image ratio.

If I wanted to stretch an image the re-size only re-sizes to the ratio of the svg image. So if I wanted an image to fill the width of the screen and maintain a certain height then the image will not fill the width of the screen if the ratio does not allow.

@ivan.tellez please can you validate this and if is true could this be fixed? With this working correctly then the library will be completely usable.

Thanks

 

[Wembly]

Hello, I've test the library and it's awesome. Is possible to use this library and .svg files to draw a button with their states (pressed, normal, disabled)?. I know how to do it with images and StateListDrawable but not with vector images.

Thanks

I reckon you do this by using the canvas used by the library with a mutable bitmap for each required state of the button.

 

[ivan.tellez]

...thought I was all sorted - but...

Re-size is working but only re-size to image ratio.

If I wanted to stretch an image the re-size only re-sizes to the ratio of the svg image. So if I wanted an image to fill the width of the screen and maintain a certain height then the image will not fill the width of the screen if the ratio does not allow.

@ivan.tellez please can you validate this and if is true could this be fixed? With this working correctly then the library will be completely usable.

Thanks

Sorry, I think now its solved,


2014/09/14 New Version 0.95

Added a new function to alter the "preserveAspectRatio" property of the SVG. You can see different behaviors on the attached images.

Please see the proyect's source code for the ussage.

You can read about the property on the SVG Attribute reference:

https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/preserveAspectRatio


The new lib is attached to the first post.

 

[Wembly]

This is good news - thank you I can now resume the project I put on hold waiting for this update.

I will test and feedback the outcome. Thanks again!

 

[TheMightySwe]

Hi,

Is there any way you can rotate and render an SVG file?

 

[agus mulyana]

Dear ,

i want to create a marker for OSMDROID Map, using a file from SVG, but, how to create it? i have been tryng ti create a drawable bitmap, but till now, it's still not working properly,please help...

thank