Monday, July 27, 2009

SVG dimensions & whitespace

Perhaps this is documented somewhere, but I haven't found it.

Let's say you have an SVG image called "whitespacetest.svg" that's 200 by 50 pixels. However, let's say that it only contains a circle that's 50 by 50 on the far right, so there's 150 pixels of whitespace on the left side of the image.

What's the width of the image? According to Flex, it's 50. However, when it goes to draw the image, it will use the full width of the SVG.

Here's the test code:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script>
<![CDATA[
[Embed(source="whitespaceTest.svg")]
[Bindable]
public var whitespaceTest;
]]>
</mx:Script>

<mx:VBox>
<mx:HBox width="200" height="10" backgroundColor="#ff0000"/>
<mx:Image id="testImage" source="{embed}"/>
<mx:Label text="{testImage.width}"/>
</mx:VBox>
</mx:Application>


This will display 50 for the width, but the circle will be flush with the right edge of the colored box.

My takeaway is that if you need to know the width of an SVG, don't use whitespace in it. Kind of sucky.

No comments:

Post a Comment