Skip to content
Reuters graphics kit

Adobe Illustrator (AI) graphics

Many graphics on Reuters Graphics pages are created using Adobe Illustrator.

To translate Illustrator graphics into a format that’s ready for the web, we use ai2svelte.

Adobe Illustrator templates

Look for Adobe Illustrator templates in the project-files/ directory.

  • ai2html.ait: Standard graphics template for embeddable or inline graphics
  • dotcom.ait: Template for making images at the ideal size for the reuters.com homepage
  • sharecard.ait: Template for making images at the ideal size for thumbnails on social media and in search results

Create a new .ai file in the root of the project-files/ directory by opening the template file in Illustrator for each new graphic you want to create. The name of the file should be a valid slug (lowercase letters, hyphens instead of spaces), e.g. ukraine-map.ai.

  • Directoryproject-files
    • ai2html.ait
    • bar-chart.ai
    • locator-map.ai

ai2svelte

ai2svelte is Reuters Graphics’ Svelte port of the popular New York Times ai2html script.

ai2svelte allows us to export Adobe Illustrator graphics for the web, with crisp text and responsive sizing whether readers are viewing our graphics on a phone, desktop or anything in between.

All settings described in the NYTimes’ docs also apply to ai2svelte.

ai2html

Installing ai2svelte

  1. Download the ai2svelte script.
    ai2svelte Get the ai2svelte script from Reuters Graphics
  2. Move it into the Illustrator folder where scripts are located. For example, on a Mac running Adobe Illustrator 2025, the path would be: /Applications/Adobe Illustrator 2025/Presets/en_US/Scripts/ai2svelte.js.

Running ai2svelte

  1. After installing ai2svelte, you should be able to run the script from within your Illustrator file by choosing File > Scripts > ai2svelte

  2. A svelte component and images will be exported within the graphics kit.

    • Directoryproject-files
      • map.ai Illustrator file
    • Directorysrc
      • Directorylib
        • Directoryai2svelte
          • map.svelte Exported Svelte component
      • Directorystatics
        • Directoryimages
          • Directorygraphics
            • map-xs.jpg Exported graphic images
            • map-sm.jpg
            • map-md.jpg
            • …

Adding AI graphics to your page

In most cases, you’ll use the GraphicBlock component from Reuters graphics components library to add ai2svelte-exported graphics to your page.

Graphics components: GraphicBlock

Making embeddable AI graphics

Follow these steps using kit mods to create embeddable AI graphics. You’ll make an embeddable graphic HTML page that can be embedded on a client’s website and other dotcom stories as well as static JPG image and editable EPS versions of your graphic.

  1. If you only intend to publish embeddable graphics, convert your project type to embeds-only using the “Change project type” kit mod.

  2. Create an AI graphic from the .ait template in project-files/ with a sluggable name (i.e., lowercase letters, hyphens instead of spaces), e.g. ukraine-map.ai.

    • Directoryproject-files
      • ai2html.ait Template
      • map.ai New graphic

  3. Export the graphic using ai2svelte.

    • Directoryproject-files
      • ai2html.ait
      • map.ai
    • Directorysrc
      • Directorylib
        • Directoryai2svelte
          • map.svelte

  4. Make an embeddable graphic page using the “Make ai2svelte embeds” kit mod.

    • Directorypages
      • Directoryembeds
        • Directoryen
          • Directorymap
            • +page.svelte
    • Directoryproject-files
      • ai2html.ait
      • map.ai
    • Directorysrc
      • Directorylib
        • Directoryai2svelte
          • map.svelte

  5. Add embed metadata to the embeds story in RNGS.io for this graphic and sync your project with RNGS.io.

  6. Before publishing, run “Export AI statics” kit mod to create JPG and EPS media assets and Sphinx preview image for your graphic.

    • Directorymedia-assets
      • Directoryen
        • Directorymap
          • graphic.jpg
          • graphic.eps
    • Directoryproject-files
      • ai2html.ait
      • map.ai
    • Directorysrc
      • Directorystatics
        • Directoryimages
          • Directoryembeds
            • Directoryen
              • map.jpg

Image layers

If you’ve imported images into your Illustrator file, make sure they are embedded, rather than linked, wherever possible.

If you need to link large images — for example, satellite images edited in Photoshop — make sure the image is in a folder inside the project-files/ directory and linked from there to the Illustrator file.

  • Directoryproject-files
    • Directorylayers
      • satellite.jpg Linked image
    • map.ai AI file using linked image

Oversize Adobe Illustrator files

Any files larger than 100 MB cannot be pushed to GitHub. If your Adobe Illustrator file gets larger than that, you must add it to your project’s .gitignore.

  • Directoryproject-files
    • ai2html.ait
    • locator-map.ai >100 MB
.gitignore
# other ignored files ...
project-files/locator-map.ai