omeshwar / svg-android-2 Goto Github PK

What steps will reproduce the problem?
1. Apply the following patches to the project: 
http://code.google.com/p/svg-android/issues/detail?id=21
2. Display an SVG document with an embedded image (protocol "data"), e.g. of 
the type "image/png;base64" followed by the encoded image data.

What is the expected output? What do you see instead?
The image is expected to be displayed properly. Instead, a black square is 
displayed (which is the fallback in case of an unsupported image by the above 
patches).

What version of the product are you using? On what operating system?
-

Please provide any additional information below.
The current version of svg-android-2 does not support images at all. By adding 
the patches I meant to fix that, so it's not actually an issue with the 
project...

When using group elements the gradientMap is being cleared.
This results in solid black fills if the gradients are defined outside the 
group tag.   
Commenting out 'gradientMap.clear()' around line #1850 in the parser solves the 
problem.

What steps will reproduce the problem?
1.Any SVG with <tspan> tag ignores it 
2.Complex SVGs with 5000lines of xml is rendered wrong (colors are mixed up)


What is the expected output? What do you see instead?
text should respect <tspan> tag. Highly appreciated.

What version of the product are you using? On what operating system?
On Android 4.0

Please provide any additional information below.

What steps will reproduce the problem?
1. Use an SVG that has a fill-opacity and/or stroke-opacity set at the group 
level and that is not set on an element within the group.
2. Notice that the children of the group do not inherit the opacity.


What is the expected output? What do you see instead?
Expected behavior is that children of a group inherit the opacity of the group, 
while children outside of all groups default to an opacity of 1 if not set.


Please provide any additional information below.
A super simple example SVG that exhibits this problem:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
 <g style="opacity:0.5">
  <rect x="50" y="20" width="150" height="150" style="fill:blue;stroke:pink;stroke-width:5" />
 </g>
 <rect x="250" y="20" width="150" height="150" style="fill:blue;stroke:pink;stroke-width:5" />
</svg>

With this example, you should see the rectangle on the left at 50% opacity and 
the rectangle on the right should be fully opaque.  However, with the current 
code, both rectangles are fully opaque.

I have many SVGs that specify width and heght in "pt" rather than in "px", ie. 
<svg><width>200pt</width>...
The method parseFloat will throw an exception right at the start, and skip 
decoding the SVG.
The fix is super-easy, in SVGParser.java line 720:
---------------------------------

    private static Float getFloatAttr(String name, Attributes attributes, Float defaultValue) {
        String v = getStringAttr(name, attributes);
        if (v == null) {
            return defaultValue;
        } else {
            if (v.endsWith("px") || (v.endsWith("pt))) { // added by [email protected] to handle "pt" too.  
                v = v.substring(0, v.length() - 2);
            }   

            //            Log.d(TAG, "Float parsing '" + name + "=" + v + "'");
            return Float.parseFloat(v);
        }
    }

---------------------------------
I am no expert in SVG units, maybe there are a few more missing, may be worth 
to strip whatever unit with a regex and parse the float?

What steps will reproduce the problem?
1.Load a SVG dont have the option for resize 

What is the expected output? What do you see instead?
Sizes of  Pictures what you like

What version of the product are you using? On what operating system?
The last version 

Please provide any additional information below.
I provide you the function who i make it for do this;
this function must be in SVG.class
and when you like load make this steps;

svg = SVGParser.getSVGFromResource(getResources(), R.raw.bolsa);
Picture=svg.resizePicture(height);//I only send one parameter for mantaining 
the scale

---
FUNCTION ON SVG.class

---
public Picture resizePicture(int height){
        int width=(int) ((height*limits.right)/limits.bottom);
        Picture newPicture = new Picture();
        Canvas canvas;
        Bitmap bitmap=Bitmap.createBitmap((int)limits.right,(int) limits.bottom, Bitmap.Config.ARGB_4444);
        canvas = new Canvas(bitmap);
        canvas.drawPicture(picture);
        bitmap=Bitmap.createScaledBitmap(bitmap, width, height, true);
        canvas=newPicture.beginRecording(width, height);
        canvas.drawBitmap(bitmap, 0,0, null);
        newPicture.endRecording();
        bitmap=null;
        limits.right=width;
        limits.bottom=height;
        return newPicture;
    }

What steps will reproduce the problem?
1. Attempt to parse an SVG containing a radialGradient that is dependent on 
another linearGradient for its <stop>s.

What is the expected output? What do you see instead?
SVG fails to parse and hence can't be displayed.

Please provide any additional information below.

Move 'xlink' handling to before fetching colors when processing 
<radialGradient>:

} else if (localName.equals("radialGradient")) {
    if (gradient.id != null) {
        if (gradient.xlink != null) {
            Gradient parent = gradientRefMap.get(gradient.xlink);
        if (parent != null) {
            gradient = parent.createChild(gradient);
        }
    }
    int[] colors = new int[gradient.colors.size()];
    for (int i = 0; i < colors.length; i++) {
        colors[i] = gradient.colors.get(i);
    }
        float[] positions = new float[gradient.positions.size()];
        for (int i = 0; i < positions.length; i++) {
            positions[i] = gradient.positions.get(i);
        }
        RadialGradient g = new RadialGradient(gradient.x, gradient.y, gradient.radius, colors, positions, Shader.TileMode.CLAMP);
        if (gradient.matrix != null) {
            g.setLocalMatrix(gradient.matrix);
        }
        gradientMap.put(gradient.id, g);
        gradientRefMap.put(gradient.id, gradient);
    }
}

Fill colors in groups are not "inherited" by children.
For example, this should display an England flag, but shows a black cross 
instead of red:

    <?xml version="1.0"?>
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 15" width="800" height="480">
        <rect width="25" height="15" fill="#FFF"/>
        <g fill="#CE1124">
            <rect width="3" height="15" x="11"/>
            <rect width="25" height="3" y="6"/>
        </g>
    </svg>

The fill and stroke of groups are now stored in a stack, so we now know if set 
in a group. doFill and doStroke return true if set in a group even if not set 
in the element.
Moreover, I fixed a bug for which SVGHandler.doFill processed missing fill 
attributes as black.

Attached is the modified SVGParser.java.

What steps will reproduce the problem?
1. Display an SVG document with at least one "display='none'" element that 
contains a <text> element

What is the expected output? What do you see instead?
Nothing is supposed to happen, but instead, the app crashes with an underflow 
exception.

What version of the product are you using? On what operating system?
-

Please provide any additional information below.
This can be fixed by checking the "hidden" flag in the piece of code popping 
the <text> transform from the transform stack in the "endElement" method. 
Currently, the transform is not pushed in "startElement" but later popped in 
"endElement".

Generally, I think it would be best (at least better) if elements whose 
"display" attribute is "none" were skipped altogether.

What steps will reproduce the problem?
1.A svg with opacity

What is the expected output? What do you see instead?
Some with opacity applied, Normal image without transparency/opacity.

What version of the product are you using? On what operating system?
The last you have on git; 2.3.7 . 

Please provide any additional information below.

I make some Changes and work for me, I dont know if had bugs.

I am working on reading in some svg fonts and neede the Qq and Tt commands so 
I've implemented them. 
My first tests show some pretty good results.

Just add these after case A,a and before the default case in doPath in 
SVGParser.

case 'T':
case 't': {
    wasCurve = true;
    float x = ph.nextFloat();
    float y = ph.nextFloat();
    if (cmd == 't') {
        x += lastX;
        y += lastY;
    }
    float x1 = 2 * lastX - lastX1;
    float y1 = 2 * lastY - lastY1;
    p.cubicTo( lastX, lastY, x1, y1, x, y );
    lastX = x;
    lastY = y;
    lastX1 = x1;
    lastY1 = y1;
    break;
}
case 'Q':
case 'q': {
    wasCurve = true;
    float x1 = ph.nextFloat();
    float y1 = ph.nextFloat();
    float x = ph.nextFloat();
    float y = ph.nextFloat();
    if (cmd == 'q') {
        x += lastX;
        y += lastY;
        x1 += lastX;
        y1 += lastY;
    }
    p.cubicTo( lastX, lastY, x1, y1, x, y );
    lastX1 = x1;
    lastY1 = y1;
    lastX = x;
    lastY = y;
    break;
}

Enjoy!

Fixes syntax errors.

Unknow exception thrown by svg drawable class complete stack track is given 
below.

01-10 15:07:52.395: W/dalvikvm(23865): JNI WARNING: too many PopLocalFrame 
calls 01-10 15:07:52.395: I/dalvikvm(23865): Uncaught exception thrown by 
finalizer (will be discarded): 01-10 15:07:52.395: I/dalvikvm(23865): 
Ljava/lang/RuntimeException;: too many PopLocalFrame calls 01-10 15:07:52.395: 
I/dalvikvm(23865): at com.libsvg.SvgRaster.svgAndroidDestroy(Native Method) 
01-10 15:07:52.395: I/dalvikvm(23865): at 
com.libsvg.SvgDrawable.finalize(SvgDrawable.java:411) 01-10 15:07:52.395: 
I/dalvikvm(23865): at dalvik.system.NativeStart.run(Native Method)

The SVGParser's performance has worsened significantly with svg-android-2 due 
to two-pass parsing.  There are numerous problems with this approach and 
implementation:

 1. The input data source is copied fully into a byte[], resulting in very high GC overhead for large files.
 2. Parsing XML is extremely expensive and should ideally be done only once unless absolutely necessary.
 3. The IDhandler parsing step results in a large number of string-related allocations that increase GC overhead even further.
 4. The added parsing step is used only to support the <use> tag, which is infrequently seen in SVG files (so we're taking a performance penalty for something unlikely to even be used).

Because of these issues (and in particular #4), I propose adjusting this 
feature to only come into effect when the <use> tag is detected.  This would 
result in worsened performance for this case, but greatly improved performance 
for the cases where <use> is not in the file.  One way we can handle this is to 
refactor parse(InputStream, ...) a bit providing a mechanism by which the 
stream can be reopened.  That way, when <use> is detected, the stream is 
reopened if possible, or an exception is thrown if not.  We would also then 
want to propose a new method for SVGParser that can read from a File which is 
quite likely a very common use case.

I can spend some time working on this myself but I need sample input files that 
were used and validated with this feature originally so that I can ensure I 
don't regress the current support for this tag.  Can these be provided in the 
samples/ directory?

Patched to apply groups fill and stroke attributes to children.
Fixed doFill, which set black fill with no fill attribute.
Deals with text.
Implemented "use" tag, requires parsing twice.
Fixed parseTranform concatenating matrices in the wrong order.

From http://www.w3.org/TR/SVG/types.html#DataTypeColor: "The format of an RGB 
value in hexadecimal notation is a "#" immediately followed by either three or 
six hexadecimal characters. The three-digit RGB notation (#rgb) is converted 
into six-digit form (#rrggbb) by replicating digits, not by adding zeros. For 
example, #fb0 expands to #ffbb00."

This is the fixed getColorValue, starting at line 801 of SVGParser.java

        public Integer getColorValue(String name) {
            String v = getAttr(name);
            if (v == null) {
                return null;
            } else if (v.startsWith("#")) {
                try {
                    String hc = v.substring(1);
                    if (hc.length() == 3) {
                        hc = new String(new char[] {
                                hc.charAt(0), hc.charAt(0),
                                hc.charAt(1), hc.charAt(1),
                                hc.charAt(2), hc.charAt(2),
                                }); 
                    }
                    return Integer.parseInt(hc, 16);
                } catch (NumberFormatException nfe) {
                    // todo - parse word-based color here
                    return null;
                }
            } else {
                return SVGColors.mapColor(v);
            }
        }

I download the version of January 2014
I had to do 3 modifications to SVGParseur for show my svg file

1)height and width not alway indicated in svg file (then see viewbox)

2)add color detection in format rgb(0,0,0)

3)correction of the interpretation of number in format 1.3e-15 ("e" not read as 
number)

you will find my modification on the attach file.

Some SVG generators makes use of presentation attributes instead of style 
attributes.
This gradient color stop definition works fine.
<stop offset="0" style="stop-color:#D45500;stop-opacity:0"/>

When using presentation attributes the parser crashes.
<stop offset="0" stop-color="#D45500" stop-opacity="0"/>

The parser should allow both variants.

What steps will reproduce the problem?
1.loading an SVG with the below 'defs' node using the following code:
--------------------------------------------------------------
ImageView imageView = new ImageView(this);
        // Set the background color to white
        imageView.setBackgroundColor(Color.WHITE);
        // Parse the SVG file from the resource
        SVG svg = SVGParser.getSVGFromResource(getResources(), R.raw.medium_brown);
        // Get a drawable from the parsed SVG and set it as the drawable for the ImageView
        imageView.setImageDrawable(svg.createPictureDrawable());
        // Set the ImageView as the content view for the Activity
        setContentView(imageView);
--------------------------------------------------------------
<defs>
        <!--view 3-->
        <linearGradient id="isavailable" x1="0%" y1="0%" x2="100%" y2="100%">
            <stop offset="0%" style="stop-color: #fff; stop-opacity: 1.0"/>
            <stop offset="100%" style="stop-color: #97c5ff; stop-opacity: 1.0"/>
        </linearGradient>
        <linearGradient id="isreserved" x1="0%" y1="0%" x2="100%" y2="100%">
            <stop offset="0%" style="stop-color: #f2fee9; stop-opacity: 1.0"/>
            <stop offset="100%" style="stop-color: #a8df87; stop-opacity: 1.0"/>
        </linearGradient>
        <linearGradient id="isassigned" x1="0%" y1="0%" x2="100%" y2="100%">
            <stop offset="0%" style="stop-color: #fef8e3; stop-opacity: 1.0"/>
            <stop offset="100%" style="stop-color: #ffda67; stop-opacity: 1.0"/>
        </linearGradient>
        <linearGradient id="isselected" x1="0%" y1="0%" x2="100%" y2="100%">
            <stop offset="0%" style="stop-color: #FF5500; stop-opacity: 1"/>
            <stop offset="100%" style="stop-color: #FF5500; stop-opacity: 1"/>
        </linearGradient>
        <linearGradient id="ishover" x1="0%" y1="0%" x2="100%" y2="100%">
            <stop offset="0%" style="stop-color: #FFFFFF; stop-opacity: 1"/>
            <stop offset="100%" style="stop-color: #FFFFFF; stop-opacity: 1"/>
        </linearGradient>
        <radialGradient id="enhanced-logo-fill" cx="32%" cy="32%" r="50%" fx="30%" fy="30%">
            <stop offset="0%" style="stop-color:rgb(235,235,235); stop-opacity:0.8"/>
            <stop offset="90%" style="stop-color:rgb(220,19,17);stop-opacity:1"/>
        </radialGradient>
        <symbol id="airplane" overflow="visible">
            <path stroke="black" stroke-width="1" fill="lightblue" d="M 0 25 L 0 0 L 0 -25 L -25 0 Z"/>
        </symbol>
        <symbol id="symbolRect" overflow="visible">
            <rect x="-5" y="-5" width="10" height="10" style="fill:rgb(240,65,25); fill-opacity:0.8;stroke:rgb(0,0,0);stroke-width:1"/>
        </symbol>
        <symbol id="symbolCirc" overflow="visible">
            <circle cx="0" cy="0" r="10" style="fill:rgb(12,166,107);fill-opacity:0.8; stroke:rgb(0,0,0);stroke-width:3"/>
        </symbol>
    </defs>
-------------------------------------------------------------

What is the expected output? What do you see instead?
I expect to see a rendered SVG.  Instead I see my app crashing with "invalid 
float: 0%"


What version of the product are you using? On what operating system?
I am using the latest version as of 6/10/2013, and developing for Android 2.3+

Please provide any additional information below.
  I cannot attach the other contents of the SVG due to IP concerns, so if this is not enough information please let me know and I will supply anything I can.

If anyone's interested, I've gone around collecting all the various patches and 
forks of this awesome library, added my own changes, tested with around 200 
SVGs and have published my own fork.

If the original author decides to take this project on again I will cease 
maintaining my fork.

Until then, if anyone's interested, you'll find my fork on Maven central so you 
can just punch in a few details into your Maven/sbt/gradle/ant+ivy script to 
get the most recent version.

https://github.com/japgolly/svg-android

Thanks. Hope you enjoy.
David

Patched to apply groups fill and stroke attributes to children.
Fixed doFill, which set black fill with no fill attribute.

Currently, when a group provides an opacity, that value is ignored in the 
children of the group.
Instead, we should maintain a stack of the current group's opacity and apply 
the current value to all colors.

What steps will reproduce the problem?
1. Try to parse any SVG containing gradients defined in <defs>

What is the expected output? What do you see instead?
Solid Black used instead of defined gradients.

Seems to be a problem with the code introduced with Issue 6.  Adjusting the 
code to allow <defs> to be parsed means my SVGs display correctly.

Its not clear to consumers what the impact of this setting is

My inkscape-produced SVGs have colors like "#abcdef":

              <path
                 d="m 19.532005,25.955284 0,-5.761719 -11.7187497,0 0,-4.804687 12.4218747,-18.1835939 4.609375,0 0,18.1640629 3.554688,0 0,4.824218 -3.554688,0 0,5.761719 z"
                 id="path3021"
                 style="font-weight:bold;fill:#abcdef" />

I'm able to get the affected paths to appear with this small change:

--- a/src/com/larvalabs/svgandroid/SVGParser.java
+++ b/src/com/larvalabs/svgandroid/SVGParser.java
@@ -802,7 +802,7 @@ public class SVGParser {
             String v = getAttr(name);
             if (v == null) {
                 return null;
-            } else if (v.startsWith("#") && (v.length() == 4 || v.length() == 
9)) {
+            } else if (v.startsWith("#") && (v.length() == 4 || v.length() == 
7 || v.length() == 9)) {
                 try {
                     int result = Integer.parseInt(v.substring(1), 16);
                    return v.length() == 4 ? hex3Tohex6(result) : result;

What steps will reproduce the problem?
1. Attempt to view attached number8.svg file.

What is the expected output? What do you see instead?
Expect to see a regular number 8 displayed.  Last two paths of figure 8 are 
closed wrongly causing a cross over on lower loop.


What version of the product are you using? On what operating system?
svgAndroid2.12Dec2011.jar (with additional patches - see other issues by me).
Android 2.3.3 Emulated.

Please provide any additional information below.
Need to track initial coord of contour so that lastX and lastY can be updated 
when contour is closed.
Need to manually close because android.graphics.path will curve the closure 
whereas SVG expects a straight line.

Patch:

Add variables to track initial contour coord:

        float contourInitialX = 0;
        float contourInitialY = 0;

Update these whenever a new contour is started by a 'm' command:

            case 'M':
            case 'm': {
                float x = ph.nextFloat();
                float y = ph.nextFloat();
                if (cmd == 'm') {
                    p.rMoveTo(x, y);
                    lastX += x;
                    lastY += y;
                } else {
                    p.moveTo(x, y);
                    lastX = x;
                    lastY = y;
                }
                contourInitialX = lastX;
                contourInitialY = lastY;
                break;
            }

Close the path manually and update lastX and lastY:

            case 'Z':
            case 'z': {
                p.lineTo(contourInitialX, contourInitialY);
                p.close();
                lastX = contourInitialX;
                lastY = contourInitialY;
                break;
            }

What steps will reproduce the problem?
1. Download Wikipedia RSS icon at 
http://en.wikipedia.org/wiki/File:Feed-icon.svg
2. Try to render it using svg-android-2 library

What is the expected output? What do you see instead?
The icons should render properly. An image of the render is attached, ignore 
the green background.
There is a problem with a couple of paths, the two arcs and the linear gradient 
defined is rendered black.

What version of the product are you using? On what operating system?
svgAndroid2.12Dec2011.jar, Android 2.3.5

Please provide any additional information below.

Added a function that will take height and width arguments and scale the 
Picture appropriately. 

We are using a version of your library in the mapsforge project, see 
https://code.google.com/p/mapsforge/source/browse/?name=rescue#git%2Fsvg-android

The main change that we have made is to use the kxml library. Using it speeds 
up SVG parsing considerably, compared with the SAX version.

(I have not made the change to read 'id' sections as double reading the same 
input stream is just too slow for our purpose, but I am pretty sure it could be 
done).

First, thanks for your updates.

I'm looking for the option to change multiple colors on the same SVG file. I 
didn't see any option to do so. I didn't dived deeply into the code, so I'm not 
sure if you have technical difficulties to do so or not.

I think that sending 2 arrays of colors, or a map of colors, that the search 
color would be the key and the value would be the replace color would seems 
logic. 

Some other approach can be as in the project 
https://github.com/josefpavlik/svg-android/blob/master/svgandroid/src/com/larval
abs/svgandroid/SVGParser.java which forked like you from the original 
svg-android project. He did the color switch based on the id, look for "public 
static SVG getSVGFromResource(Resources resources, int resId, HashMap<String, 
Integer> idToColor)"

Your project looks like the most updated one, therefore I thought that it was 
more logical to import those changes to your project.

By the way, there are some other changes in his project that you don't have, it 
might worth trying to merge his changes to your project.

Again, thanks