[FLEX-26050] Poor Rendering of Fine Lines - FXG / SVG

• Type: Bug
• Status: Open
• Priority: Major
• Resolution: Unresolved
• Affects Version/s: Adobe Flex SDK 4.0 (Release)
• Component/s: FXG - Static
• Environment: Affected OS(s): All OS Platforms; Browser: Firefox 3.x; Language Found: English
• Assignee: Unassigned
• Reporter: Adobe JIRA
• Created: 26/Nov/10 11:51
• Updated: 28/Jan/11 10:42

Description

Steps to reproduce:
1. Using the SVG file for the Spanish flag (https://secure.wikimedia.org/wikipedia/commons/wiki/File:Flag_of_Spain.svg), display the image at a large size.
2. Alternatively, convert the SVG to an FXG, and display it.
3.

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"
xmlns:comps="comps.*">
<mx:Image source="@Embed(source='../assets/flags/Flag_of_Spain.svg')" width="600" height="500"/>
<!-- <comps:Spain width="600" height="500"/> -->
</s:Application>

Actual Results:

The detailed lines in the SVG image, which can be verified by opening it in a browser (i.e. Firefox, Safari), are rendered as thick black lines. When scaled to a small size, these black lines turn into patches of black in the image. See screenshot.

Expected Results:

The fine lines should be rendered similar to the rendering in SVG-capable web browsers.

Workaround (if any):

Since this affects both SVG and FXG, the only workaround is to use a high-resolution raster image.