Svija Uses Layers
Svija uses layers to generate the pages of your site and to provide useful information.
If you are not already used to using layers in Illustrator, there three important points to remember:
- An Illustrator file must contain at least two layers to be correctly served by Svija
- A hidden layer will also be hidden on the final page
- A layer whose name is in italic will not appear on the final page
To open the Layers panel, go to Window › Layers.
To use the panel, it’s only necessary to understand the three icons on the left side of the panel:
- eye: make the layer visible
- padlock: lock (protect) the layer
- arrow › to the right: list the layer’s contents
Default Page Formats
The following formats are supplied by default, and included in the Illustrator template “Svija Page.ait” (Svija Tools).
Desktop (folder “sync/desktop”):
- Illustrator file 1680 px wide (variable height)
- 1200 px content + 240 px hidden margins on either side
Recommended Grid settings: gridline every: 240 px · subdivisions : 24
Mobile (folder “sync/mobile”) · 25% of the desktop format:
- Illustrator file 420 px wide (variable height)
- 300 px content + 60 px hidden margins on either side
Drawing Order
When the browser loads a Svija page, the elements of the page, including layers, are drawn in reverse order :
- the lowest layers are drawn before the higher-level layers
- objects placed behind are drawn before objects placed in front
It’s logical: objects that will later be covered must be drawn first.
If it is important for content to load rapidly when visiting a page, it should be placed lower in the layer palette and behind less important elements.
ID’s: CSS & Javascript
If you do not plan to add animation or CSS effects, you do not need to read the following section.
· · ·
Any element of the page can be manipulated with CSS or Javascript.
To do this, the element is given an ID.
An ID is a unique name that identifies a particular element on the page. In SvijaAdmin, you can select elements by their ID an manipulate them.
The ID’s of elements on the page correspond to the names of layers and objects, all visible in the Layers panel.
To give an ID to any element, find it in the Layers panel, double click it, and give it the ID you’d like to use.
Spaces will be converted to underlines, and dashes stay the same.
Do not use the underline in object ID’s, because Illustrator will convert it to an HTML entity: _X5F_.
For each layer, Illustrator creates a new ‹g› tag where ID = layer name.
- don’t use the underline
- spaces are converted to underlines
- dashes stay dashes
- other special characters are converted to HTML entities
For example, a layer named “menu-float” will appear in the source code as:
‹g id="menu-float"›
For modules, it’s useful to give a specific ID to the entire module.
To do this, the topmost layer should be empty of content (see previous image), with a name like:
- id svg-obj-id
Just replace “svg-obj-id” with the ID you want to use. You can then use CSS in the module scripts to position the module as you like. For example, the following will place the desktop menu in the lower right corner of the screen:
#menu-desktop {
position:fixed;
right:0; bottom:0;
left: ; top: ;
}
Information Layers
It is often useful to have layers in Illustrator that do not appear in the final page :
- original text for text that has been converted to outlines
- temporary image to represent a menu or footer
- tips or information for future reference
To indicate that a layer should not be included in the final SVG:
- double click on the layer to access its options
- un-check Print
- it is not necessary to check “Template”
The layer will no longer be included in the final SVG
Layer Visibility
If a layer is not visible in Illustrator, it will be included in the page but will not be visible by default:
- content will be included normally in the SVG
- the CSS directive will be display:none;
It is therefore possible to make the content appear dynamically by changing the style directive to “block”.
Potential Gotcha: Two Objects with the Same ID
If two objects have the same name in Illustrator:
- a layer called “testimony block”
- a group of objects called “testimony block”
The object IDs on the page will be:
- ‹g id=”testimony_block”›
- ‹g id=”testimony_block_1“›
It is not possible to know in advance which object will have which ID.
When an animation or stylesheet manipulation fails, this is the most likely cause.
Deleting or renaming one of the two objects will not correct the problem : once an object has the id “testimony_block_1”, deleting the other name will not change it.
To resolve the issue, all references to the ID must be deleted, and the correct object renamed to the correct ID.
A future update to Svija Tools will include a script to handle this task automatically.
Pages in this section:
Next Steps sections: