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:

    • 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).


    • Illustrator file 1200 px wide (variable height)

    Mobile · 25% of the computer format:

    • Illustrator file 300 px wide (variable height)

    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.

    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
    • 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”.

    Pages in this section:

    1. Using alt-eyedropper tool to apply styles
    2. Setting New Document Defaults
    3. Don’t use the “All Caps” button
    4. Kerning must be set to Zero
    5. Desktop & Mobile Document Widths
    6. Shift-click to sample colors for a gradient
    7. Placed PDF’s may not contain placed bitmapped images
    8. SVG Decimal Places
    9. Don’t use _ in layer names
    10. Hidden Layers will be Hidden
    11. Don’t use transparency in gradients in placed Ai’s or PDF’s
    12. Pasted text does not retain paragraph style
    13. Non-printing Illustrator Layers
    14. How to use Hard Spaces in Adobe Illustrator
    15. Placed Illustrator files are embedded, not linked
    16. Illustrator Layers and SVG Object ID’s
    17. Installing Illustrator Scripts
    18. Mac shortcuts for AI scripts
    19. Potential Illustrator Issues
    20. Large Canvas in Illustrator
    21. Layers·
    22. SVG Shadows
    23. Illustrator Layers
    24. Unsupported Techniques & Workarounds·
      1. The Mesh Tool·
      2. Freeform Gradients·
      3. Layer Blending Modes·
      4. Effect › Stylize·
      5. Gradient Midpoints·
      6. The Text Panel·
      7. Transparent Gradients in Placed Files·
      8. Links in Placed Files·

    Next Steps sections:

    Ask a Question...

    Your email address will not be published. Required fields are marked *