Hello!
Thank you for this library.
I'm trying to use it to create "coloring-book", and need your help)
How can I fill some element with color or bitmap?
Thank you for your attention!

How do I change width/height after I addChild(svg) to sprite?

Things that normally work don't.

While parser the xml node with text es.(text) , AsyncSVGParser parseGradients throw 1009 error.

I fix it with follow:

var nodes:XMLList = svg..::;
for each(var node:XML in nodes){
if(node&&(String(node.localName()).toLowerCase()=="lineargradient"||String(node.localName()).toLowerCase()=="radialgradient")){
parseGradient(node.@id, svg);
}
}

When you transform pattern in inkscape it creates a new pattern that links to original pattern. This do not work.

Example SVG:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->

<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink"
   version="1.1"
   width="800"
   height="600"
   id="svg3025">
  <defs
     id="defs3027">
    <pattern
       patternTransform="translate(83,114)"
       id="pattern4542"
       xlink:href="#pattern3039" />
    <pattern
       id="pattern3039"
       patternTransform="translate(41,74)"
       height="183"
       width="201"
       patternUnits="userSpaceOnUse">
      <g
         transform="translate(-41,-74)"
         id="g3035">
        <rect
           y="74"
           x="41"
           height="183"
           width="201"
           id="rect3031"
           style="color:#000000;fill:#0000ff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.5;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
        <rect
           y="99"
           x="74"
           height="96"
           width="103"
           id="rect3033"
           style="color:#000000;fill:#00ff00;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.5;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
      </g>
    </pattern>
  </defs>
  <metadata
     id="metadata3030">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title></dc:title>
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <g
     id="layer1">
    <rect
       width="201"
       height="183"
       x="41"
       y="74"
       id="rect3044"
       style="fill:url(#pattern4542);stroke:none" />
    <rect
       width="372"
       height="340"
       ry="38"
       x="337"
       y="120"
       id="rect3046"
       style="color:#000000;fill:url(#pattern3039);fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.5;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
  </g>
</svg>

I've found some bugs with mask and clip-path attributes:

1. If the element has clip-path attribute and also mask attribute set to "none" then clip-path is not applied to the element.
2. Masks are not working correctly.
   According to SVG specs "the luminance value is calculated by taking the non-premultiplied RGB color values, applying the luminance-to-alpha coefficients (as defined in the ‘feColorMatrix’ filter primitive) to convert the RGB color values to luminance values". As I understand, the result formula for mask's alpha should be
   A' = A * (R * 0.2125 + G * 0.7154 + B * 0.0721)
   and the color of the mask must be solid white.
3. Mask and clip-path are not working simultaneously.

I'm currently working on a fix...

I'm trying to move SVG elements around within the SVG, I mean change the position of some elements of a particular class.

I see the x and y position of the SVG elements are reported as 0, why so?
Although getBounds() returns the correct position and size.

When I try setting the x or y properties of the SVG element the element does move but the position is incorrect.

Is there any util that sets position of the SVG elements?

I'm using SVGRenderer in an AS3 only project.

When I load an svg I get this stack trace:

TypeError: Error #1009: Cannot access a property or method of a null object reference.
    at com.lorentz.SVG.parser::AsyncSVGParser/parseGradients()[/Users/curtisaube/Documents/ketos_workspace/SVGRenderer/src/com/lorentz/SVG/parser/AsyncSVGParser.as:326]
    at com.lorentz.SVG.parser::AsyncSVGParser/parse()[/Users/curtisaube/Documents/ketos_workspace/SVGRenderer/src/com/lorentz/SVG/parser/AsyncSVGParser.as:71]
    at com.lorentz.SVG.display::SVGDocument/parseXML()[/Users/curtisaube/Documents/ketos_workspace/SVGRenderer/src/com/lorentz/SVG/display/SVGDocument.as:186]
    at com.lorentz.SVG.display::SVGDocument/parseInternal()[/Users/curtisaube/Documents/ketos_workspace/SVGRenderer/src/com/lorentz/SVG/display/SVGDocument.as:170]
    at com.lorentz.SVG.display::SVGDocument/urlLoader_completeHandler()[/Users/curtisaube/Documents/ketos_workspace/SVGRenderer/src/com/lorentz/SVG/display/SVGDocument.as:136]
    at flash.events::EventDispatcher/dispatchEventFunction()
    at flash.events::EventDispatcher/dispatchEvent()
    at flash.net::URLLoader/onComplete()

If I comment out the calls to parseGradients and parseFilters it works fine.

I don't have any gradients or filters, so maybe that's the problem? I made the svg using Inkscape and saved it as Plain SVG.

Hi,

I have an SVGDocument which I created by the load() function. Once the document has been rendered, I want to change some of the colors of the svg. I do this by calling removeStyleDeclaration and addStyleDeclaration for the style I want to change with a new style created by createdFromString.

The problem is that this doesn't change the colors of the render. Is there something else I need to do?

Thanks,

Mark

Using AS3SVGRenderer in Starling gives an error when you try to use AddChild to put the SVGDocument on the stage. Is there a property on SVGDocument that returns a bitmap or displayobject?

The "manual scaling and centering" example is not working when you remove the width and height from [SWF(width="800", height="600")] in order to get a 100% height/width Flash movie.

First of all thanks for the great library.

In the following SVG, clip-path="url(#SVGID_4_)" causes some part of graphics to disappear (probably problem with mask in the SVGElement or mask is empty)

http://cloud.dglux.com/logo.svg

Thanks!

Running this simple example gives an error: Error: Invalid param 'xmlOrXmlString'.
at com.lorentz.SVG.display::SVGDocument/parseInternal()[D:\workspace\SVG\src\com\lorentz\SVG\display\SVGDocument.as:168]
at com.lorentz.SVG.display::SVGDocument/parse()[D:\workspace\SVG\src\com\lorentz\SVG\display\SVGDocument.as:150]
at SVGTest()[D:\workspace\SVG\src\SVGTest.as:17]

package {
import flash.display.MovieClip;
import com.lorentz.SVG.display.SVGDocument;
import com.lorentz.processing.ProcessExecutor;
[SWF(width="800", height="600")]
public class SVGTest extends MovieClip {
[Embed(source="tiger.svg", mimeType="application/octet-stream")]
private var TextClass:Class;
public function SVGTest() {
ProcessExecutor.instance.initialize(stage);
var svgDocument:SVGDocument=new SVGDocument();
svgDocument.parse(new TextClass);
addChild(svgDocument);
}
}
}

Is there a way to dynamically change the path property of the SVGElement at runtime.
I have a main SVG that I rendered on stage and it has many SVGElements.
I want to change the path of one of the SVGElement, so I tried using the "svgPath" property which is a string.

I am trying to set a path string to this property, but my issue is that the path string I take from another SVG which has different co-ordinates so I don't think it draws the path at the correct location and scale.
In short I would like to take a path from one SVG and overwrite another SVG's SVGElement path with that one.

Is this currently possible?

When 'fill' or 'stroke' attributes == 'currentColor', then it should take value from 'color' attribute. http://www.w3.org/TR/SVG/painting.html#SpecifyingPaint

I don't know if I should post any SVG parsing errers but here's what I found.

I can't not post any svg tags here. So check the dropShadow filter in below link
https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feGaussianBlur

This code should draw green circle with a shadow below it but in AS3SVGRenderer, it just draws blurred green circle.

I'm trying to load an image to stage, and i need to resize/scale it.
But i can't find a way or a property to do it.
I've used this:

var defaultURLSVG:String = "image.svg";
var svgImage:SVGDocument = new SVGDocument();
svgImage.load(defaultURLSVG);
addChild(svgImage);

I've seen that a SVGImage, has the property i need, but i can't seem to get a way do load the image from the SVGImage class.

Can you help me please?

First - great library! Thank you for that :-)

I have problems with some svg files. Import is ok, but is problem with bounds of vector file. I.e.:
http://snag.gy/ircu0.jpg, svg file: http://pastelink.me/dl/c3795d
svg graphics is located on bottom bounds rectangle. Is any way to re-calculate bounds to real bounds? (remove padding)?

Hi - great library (I'm a bit late to the party). I only wish there was a bit more documentation about how to get access through code to specific elements in order to specify properties.

Don't know if this is still being developed but I encountered a bug/issue with the dropShadow filter when testing out the functionality.

Using the w3schools example

 <svg height="140" width="140">
  <defs>
    <filter id="f4" x="0" y="0" width="200%" height="200%">
      <feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />
      <feColorMatrix result="matrixOut" in="offOut" type="matrix"
      values="0.2 0 0 0 0 0 0.2 0 0 0 0 0 0.2 0 0 0 0 0 1 0" />
      <feGaussianBlur result="blurOut" in="matrixOut" stdDeviation="10" />
      <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
    </filter>
  </defs>
  <rect width="90" height="90" stroke="green" stroke-width="3"
  fill="yellow" filter="url(#f4)" />
</svg> 

Crude AS3 code:

var str:String = new String;
str +='<svg height="140" width="140">';
str +='<defs>';
str +='<filter id="f4" x="0" y="0" width="200%" height="200%">';
str +='<feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />';
str +='<feColorMatrix result="matrixOut" in="offOut" type="matrix"';
str +='values="0.2 0 0 0 0 0 0.2 0 0 0 0 0 0.2 0 0 0 0 0 1 0" />';
str +='<feGaussianBlur result="blurOut" in="matrixOut" stdDeviation="10" />';
str +='<feBlend in="SourceGraphic" in2="blurOut" mode="normal" />';
str +='</filter>';
str +='</defs>';
str +='<rect width="90" height="90" stroke="green" stroke-width="3"';
str +='fill="yellow" filter="url(#f4)" />';
str +='</svg> ';

var svg:SVGDocument = new SVGDocument();  
canvas.addChild(svg);
svg.parse(str);
svg.x = 700;
svg.y = 300;

This is in Flex 4.6 and canvas is a SpriteVisualElement.
Screenshot of result:

Hello?
I love your project and I'm sorry that my english is poor.
The first problem is that "clip-path" in [style] attribute doesn't work correctly.
so... I modified svg file and I found it works correctly, but has the second problem.
{Original}
<path style="clip-path:url(#SVGID_2_);fill:#EC681B;" d="M42.508,72.251c- ...
{Modified}
<path clip-path="url(#SVGID_2_)" style="fill:#EC681B;" d="M42.508,72.251c-...

The second problem is that the last "clip-path" doesn't work.
so... I modified svg file again and I found it works perfectly.
I inserted empty tag like "" after the last path tag.
{Original}
<path style="clip-path:url(#SVGID_2_);fill:#2D2929;" d="M76.625,171.409c0.5 ... />

{Modified}
<path style="clip-path:url(#SVGID_2_);fill:#2D2929;" d="M76.625,171.409c0.5 ... />

Please correct this problem and It's possible to send svg file I used If you want.
Thank you very much.

SVG specification:

translate( []), which specifies a translation by tx and ty. If is not provided, it is assumed to be zero.
http://www.w3.org/TR/SVG/coords.html

Currently, the library assumes it to be equal tx

Hello,

how can i get a list of elements of an SVG when selecting it.

i can see in com.lorenz.SVG.display.SVG the "numElements" but i dont know how to access them!

Thanks in advance & regards

François

Hi,
thanks for this library.
I'm testing it in flash and it works great with loading/parsing and all but I noticed there's some issue with clone method.

I'm trying to add the clone to my displaylist and it works OK with solid fills but when object has a gradient fill it only clones the stroke.

I am a AS3 beginner and AS3SVGRenderer runs successfully when I test it separately (see below).

package {
import flash.display.Sprite;
import com.lorentz.SVG.display.SVGDocument;
import com.lorentz.processing.ProcessExecutor;
public class trySVG extends Sprite{
public function trySVG() {
ProcessExecutor.instance.initialize(stage);
var svg:SVGDocument = new SVGDocument();
svg.load("actors/200x160pxtry.svg");
addChild(svg);
}
}
}
I come across a problem when integrating this package into my swf in Flash Professional CS5. The codes are the same and the error report says that it can't find specific types (see below).

D:\WEBSITE\work\try04\com\lorentz\SVG\parser\SVGParserCommon.as，19 行 1046: 找不到类型，或者它不是编译时常数: SVGPathCommand。
D:\WEBSITE\work\try04\com\lorentz\SVG\parser\SVGParserCommon.as，87 行 1046: 找不到类型，或者它不是编译时常数: String。

I believe the report is wrong and doesn't locate the real mistake. Is there a chance of possible conflict between AS3SVGRenderer and other library since my swf is constructed under a pureMVC framework. How could I find the mistake, any help? : (

Hello? It's my second issue.
The problem is that SVGRenderer doesn't render exactly like below:

"

I tested it on browser (ex:FireFox 30.0) and It shows dashed-line exactly.
This problem is very important for me. Please fix it as quickly as possible...
Thank you.

clip-path with non-zero line width don't render correctly

Left - rendered by library, right - by inkscape

Some assets may be from swf library

While I render this path <path id="MJMAIN-2212" stroke-width="10" d="M84 237T84 250T98 270H679Q694 262 694 250T679 230H98Q84 237 84 250Z"></path>
SVGPathRenderer curveToQuadraticSmooth miss default lastControlPoint

I fix it byadd
if(!lastControlPoint){
lastControlPoint = new Point(_drawer.penX, _drawer.penY);
}

to curveToQuadraticSmooth and curveToCubicSmooth function

Not seeing any text when it is defined using textPath

For example:

<svg width="100%" height="100%" viewBox="0 0 1000 300"
     xmlns="http://www.w3.org/2000/svg" 
     xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <path id="MyPath"
          d="M 100 200 
             C 200 100 300   0 400 100
             C 500 200 600 300 700 200
             C 800 100 900 100 900 100" />
  </defs>

  <use xlink:href="#MyPath" fill="none" stroke="red"  />

  <text font-family="Verdana" font-size="42.5">
    <textPath xlink:href="#MyPath">
      We go up, then we go down, then up again
    </textPath>
  </text>
</svg>

I am making a text shape editor using your AS3SVGRenderer which is so great - thank you very much. An "SVG" object is added in a panel and my application keeps changing the SVG object's source as the user moves UI components.

The problem is, realtime change in SVG.source makes the SVG object blinking on the screen. I tried to add event listener with either of SVGEvent.PARSE_COMPLETE and SVGEvent.RENDERED, but blinking still existed.

What should I do to avoid blinking SVG component?

Simplest way to outline text - use GlowFilter. But it is not universal solution. For example it cannot give for us gradient outline.

PS: Copy of issue 38 on google code project reported by Alexander.Chaika.

Hi, I'm developing app based on your library.

I merged it with transform tool so i can resize, rotate, delete any object from loaded svg file.

But I couldn't find any way to edit SVGText like an ordinary flash TextField. Is there any way to it?

Thanks in advance!

Stroke-miterlimit argument is ignored.
Default value in SVG is 4, and default value in flash is 3.
At least SVGs default value should be used.

Hi,

another question - why rendered event disappear? Is any other event or method to know when rendering svg is end?

Example:

<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <g transform="scale(400,400)">
        <path d="M.1,.1L.5 .1L.5 .5L.1,.5Z"
        style="fill:white;stroke:red;stroke-width:0.1"/>
    </g>
</svg>

Example:

  <svg:g style="opacity:0.8">
         <svg:rect style="fill:black">
  </svg:g>

Rect's opacity should be 1, but now it's 0.8.

if svg:use that references svg:g goes before that svg:g than in some cases it may have not all of the svg:g children.

unless I'm missing something, it looks like there's no opportunity to hook a ProgressEvent into this without exposing SVGImage's _loader, or something along those lines - any chance of seeing that implemented in the future? Or would you be amenable to a patch that adds support for that? I know, SVGs are generally not huge, but it'd be nice to bring it more in line with existing bitmap loader functionality.

I apologize in advance for the vagueness of this question. I'm hoping the phenomenon will trigger some possible clue to the solution but if it doesn't, I'll augment this question with more specific details and links later on (once my site is visible publicly from the internet).

I have used as3svgrenderer in my flash project to render icons and it's working great! I have one specific situation where the path elements are either not rendering at all, or are only partially rendering. Here is a sample svg:

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="info" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 40 40" style="enable-background:new 0 0 40 40;" xml:space="preserve">
<style type="text/css">
    .background{fill:#0BAEDA;}
    .st0{fill:#FFFFFF;}
</style>
<rect class="background" width="40" height="40"/>
<ellipse class="st0" cx="24.5" cy="7.8" rx="3.5" ry="3.6"/>
<path class="st0" d="M13,30.8c0,0,4.5-12.1,5.1-13.2c0,0,0.6-2.4-1.8-0.7L13.4,20c0,0-1.5,1.2-1.3-0.8c0,0,2.3-3.3,6-5.4
    c0,0,5.7-2.5,6.9,1.1c0,0,0.8,0.8-1.2,6.2l-3.3,8.6c0,0-0.8,2.8,0.9,1.6l1-0.8l2-2c0,0,1.6-2.2,1.6-0.1c0,0-0.1,1.4-4.4,4.9
    c0,0-3.1,3-7.3,2.1C14.4,35.4,11.9,34.8,13,30.8z"/>
</svg>

In this example, the rect and ellipse elements render beautifully. The path doesn't render at all. As I said above, this happens when my flash player is loaded in a google VAST Inspector (https://developers.google.com/interactive-media-ads/docs/sdks/flash/vastinspector). My code is not yet public on the internet so I can't provide links to the phenomenon but I'm attaching two screen captures of the same application, one loaded directly from the browser and the other loaded from within the Google VAST inspector. The svg icon I referred to earlier in this message appears in the two screen captures inside the bottom-most yellow circle.

Can you think of any reason why this might be happening?

When I define an image tag and use ( xlink:href="myimage.png" ) as an attribute, the resulting image is not positioned correctly according to the x and y specified in the tag.

I briefly reviewed the code (SVGImage.as) and added the x and y positioning as follows:

   public function loadURL(url:String):void
    {
        if (_loader != null)
        {
            content.removeChild(_loader);
            _loader = null;
        }

        if (url != null)
        {
            _loader = new Loader();
            _loader.x = int(svgX); // ADDED
            _loader.y = int(svgY); // ADDED
            _loader.contentLoaderInfo.addEventListener(Event.COMPLETE, loadComplete);
            _loader.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR,
                                                       loadError);
            _loader.load(new URLRequest(url));
            content.addChild(_loader);
        }
    }

This does appear to correct the issue, but is it the right solution?

SVG object is drawn about 25% smaller than the actual size.

see this photo please: http://imageshack.com/a/img203/5676/gqrf.jpg

The first line in the photo is drawn by my own SVG parser.
The second line is drawn by AS3SVGRenderer.

Both parsers used to draw in the same size but this problem happened after I updated AS3SVGRenderer from one-year old version to the newest version.

All I wrote is
var svg:SVG = new SVG() //Flex.SVG
svg.source = getSVGText();

Is there anything I am missing?

HI, i use your lib to edit svg file, such as svgElement.style.setProperty( "fill", "red" );
Then how to get the new svg data.
Is there any function like svgElement.saveToSVG():XML;
thanks.

Hey guys,
Would you please consider having a look at this SVG?

http://maidens.ciacob.ro/wp/wp-content/uploads/public_misc_temp/score.svg

Open it in Firefox, then open it using your "SVGRendererTest" flex application.

It is a moderately complex musical score exported to SVG, and the filled noteheads appear much to the right and upward than where they should appear — the empty note heads, however, are placed correctly.

I would very much appreciate if you take the time to look into this one.

Thank you a lot,
Claudius

P.S.: as a quick reference, here are PNG screenshots.

do you have a way to export or access the xml data once it is in the SVGDocument? I can't find it anywhere. I am making changes to the SVGDocument and want to save the changes.
thank you
Jennifer

Blur filter rendered firefox and by library:

\com\lorentz\SVG\display\base\SVGElement.as, Line 27 1045: Interface ICloneable was not found.

Please see this image:
http://oi58.tinypic.com/2yz0uf8.jpg

I drew paths with strock and strock-width parameters. The result stroke is very distorted. Changing stroke-linecap value does not help at all.

Would you give me a tip for fixing this problem please?