0

I need to be able to create an Illustrator file with a text field with one single text field and sometimes, if possible, an image in it as well.

It looks like the AI file is binary and I'm not sure how to write that. I can more easily write a text file and it looks like FXG or SVG is an accepted file format that Illustrator can import.

Is possible to embed an image in FXG?

UPDATE
As an example of what I'm looking for here's the file exported to SVG from Illustrator with embedded image data:

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="612px" height="792px" viewBox="0 0 612 792" enable-background="new 0 0 612 792" xml:space="preserve">
    <image overflow="visible" width="400" height="324" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZAAAAFECAIAAACGcv+iAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJ
    bWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdp
    5kJj2am9CGtYTDfOXIL81TzGme8Nc1GyHoMINW8faYbMEGfdIx918P8KMABYSjb4P5vsjAAAAABJ
    RU5ErkJggg==" transform="matrix(1 0 0 1 60 34)">
    </image>
    <text><tspan x="0" y="0">text</tspan></text>
</svg>

Note: it's not all the image data. I've trimmed most of it out.

Here's the same file exported to FXG from Illustrator:

<Graphic version="2.0" viewHeight="792" viewWidth="612" ai:appVersion="15.1.0.39" ATE:version="1.0.0" flm:version="1.0.0" d:using="" xmlns="http://ns.adobe.com/fxg/2008" xmlns:ATE="http://ns.adobe.com/ate/2009" xmlns:ai="http://ns.adobe.com/ai/2009" xmlns:d="http://ns.adobe.com/fxg/2008/dt" xmlns:flm="http://ns.adobe.com/flame/2008">
  <Library/>
  <Group ai:seqID="1" d:layerType="page" d:pageHeight="792" d:pageWidth="612" d:type="layer" d:userLabel="Artboard 1">
    <Group ai:seqID="2" d:type="layer" d:userLabel="Layer 1">
      <BitmapImage x="60" y="34" scaleX="1.4" source="@Embed('/images/myimage.png')" fillMode="clip" ai:seqID="3"/>
      <RichText x="53" y="28.9253" fontFamily="Andale Mono">
        <content><p><span>text</span></p></content>
      </RichText>
    </Group>
  </Group>
  <Private>
    <d:FontMap>
      <d:Map fontFamily="Andale Mono" fontStyle="normal" fontWeight="normal" postScriptName="AndaleMono"/>
    </d:FontMap>
  </Private>
</Graphic>

In this case the file is NOT embedded. The compiler directive to embed it is though. If sent this FXG file to someone they would need the image as well. So it's not really embedded.

1.21 gigawatts
  • 16,517
  • 32
  • 123
  • 231

1 Answers1

1

It looks like there was no official way to embed the image data. There is a directive that points to the location of the file but that is not the same:

<BitmapImage source="@Embed('location/of/file.png')" />

But I realized that it is the application that reads the file that determines what it does with the supplied information.

What I mean is that I can probably encode the image in the same way it is encoded into SVG and write that data in the FXG XML. It would be up to the application to make use of that data.

For example, I could add a BitmapData tag to the Library tag and save the image data there:

<Graphic>
  <Library>
    <BitmapData id="myimage" data="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZAAAAFECAIAAACGcv+iAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJ
    bWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdp
    5kJj2am9CGtYTDfOXIL81TzGme8Nc1GyHoMINW8faYbMEGfdIx918P8KMABYSjb4P5vsjAAAAABJ
    RU5ErkJggg==">
    </BitmapData>
  </Library>
  <Group>
      <BitmapImage x="60" y="34" scaleX="1.4" source="{myimage}" fillMode="clip" ai:seqID="3"/>
  </Group>
</Graphic>

It would be up to the application to use it. Since I haven't seen any mention of embedded data in the FXG spec I don't know how well it will go over.

1.21 gigawatts
  • 16,517
  • 32
  • 123
  • 231