Svija offers a lot of flexibility in how you use images, but some techniques work better than others.
A Folder Called Links
In order to ensure that Illustrator can always find placed images, they are kept in a folder called “Links” in the same folder as the Illustrator file:
Try Placing an Image
Open Home.ai in Illustrator, then unlock one of the light gray content layers to place the image. Then:
- menu File › Place…
- navigate to the Links folder next to home.ai
- choose any image
VERY IMPORTANT: all images must be in the “Links” folder that accompanies the Illustrator file.
You can copy the image to the correct folder after placing by clicking Relink Images in the Svija Tools panel (see below).
Was the Website Updated?
Click Save in Svija Tools.
Go back to your browser and refresh the page. If Svija Sync was running, you should see the image that you placed in Illustrator.
Image Formats
When practical, it is better to use placed vector images than pixel images:
- Illustrator files ending in .ai
- PDF files ending in .pdf
- SVG files ending in .svg
There is one important limitation:
It is not possible to use hybrid placed images (vector and pixel)
Bitmapped Images
The following formats work well with Svija:
- JPG or JPEG images ending in .jpg
- PNG images ending in .png
- GIF images, ending in .gif
Use JPG unless there’s a reason to use PNG or GIF. For optimal visitor experience:
computer screen: image pixels = Adobe Illustrator pixels x 2.4
mobile screen: image pixels = Adobe Illustrator pixels x 3.5
Missing Images
If Illustrator will link to images that are outside your sync folder, they will be broken for your visitors. This usually happens when content has been copied from elsewhere.
To fix this and other problems, Svija Tools includes a button called Relink Images:
This tool will try to repair any problems with linked or embedded images. If it is not possible to repair an image, it will be highlighed in yellow on the page.
Embedded Images
Svija does not accept embedded images. Fortunately, you can use Svija Tools to un-embed images:
Clicking on Relink Images will search for the original images and copy them to the Links folder.
If the original cannot be found, the image will be highlighted in yellow.
Pages in this section:
Other sections: