Svija

From WTFpedia, the free encyclopedia

“SvijaSVG” redirects here. For the Ukranian cosmetics company see Svija Cosmetics ▲.

Svija is an offline website builder used to create websites based on the SVG format, without the need to write code.

In its current form, Svija allows users to design and build websites using Adobe Illustrator. Although content is served in an HTML wrapper, Svija websites are unique in that they are entirely constructed from SVG files.

Svija’s philosophy is that HTML is appropriate for informational web pages where page layout is of secondary importance, but that the SVG format is significantly better adapted to giving complete visual control to the content creator.

The Svija workflow is as follows:

the user starts a synchronization program, Svija Sync
the user creates content (pages or modules) in Adobe Illustrator
SVG files are exported via an Illustrator panel, Svija Tools; any changes are uploaded automatically by Svija Sync
no further work is necessary for the web content to be completed
content can be combined, moved or deleted in Svija Admin

As of 2021, Svija is the only platform that enables the creation of SVG-based websites. Svija is currently in beta. It is a proof of concept, created to establish the viability of the Svija project while funding is sought to complete the full Svija project.

Use of Svija requires the creation of a free account, available by request at svija.love ▲.

Developer(s): Svija SAS Initial release: 22 December, 2014 Stable release: 2.2.9 · 5 November, 2021 Downloads: Mac App Store (Svija Sync), Svija Store (Svija Tools) Written in: Django, Python, PostgreSQL Platform: Mac (Apple) Available in: English, French Type: website builder, content management system, content mgmt framework License: MIT (Svija Tools, Svija Sync) Website: svija.love

Overview
History
Examples
Problems with HTML
SVG: a neglected format
The benefits of Svija
The limitations of Svija
Responsive web design
The Rem
Accessibility
Search Engines
Animation
Text Handling
The Svija Store
The future of Svija
See also
External links

Overview

SVG-based websites

Svija is designed to facilitate the creation of visually rich, heavily detail-oriented websites. Whereas HTML-based websites are limited graphically and vulnerable to display differences between different platforms and browsers, SVG-based websites can display extremely detailed content identically across all platforms.

Svija websites display normally and are ranked normally by search engines. From the user’s point of view, a Svija website is indistinguishable from an HTML website; it behaves the way one would expect (text can be selected, links can be followed etc.). The main technical difference between a Svija website and a traditional website is that instead of the page elements being defined by HTML tags, they are defined by SVG tags.

Elements of Svija

Although there are plans to release a proprietary authoring tool, Svija currently uses Adobe Illustrator for page layout.

Svija Admin consists of a web interface that enables content management, combined with an additional server-side component that adapts Illustrator-generated SVG pages for website use.

In addition to the Svija server installation, Svija Sync, a Mac app, continuously synchronizes local content with a server, and Svija Tools, an Adobe Illustrator panel, facilitates the creation of web content.

Svija Admin

Svija Admin is a content management system (CMS) written in Django and based on a PostgreSQL database, roughly similar to Wordpress or other website builders. It enables administrators to attribute Illustrator-generated SVG files to specific pages, as well as to accomplish other administrative tasks.

Svija Admin enables combining different SVG-based modules such as menus and page footers, or banners, advertising or special functionality. Other features include the management of page titles, a sitemap, SEO information, and form functionality.

Most importantly, Svija Admin provides a proprietary conversion process that adapts the Adobe SVG format to web page display.

Svija Sync

Svija Sync is a Mac app that synchronizes a local project folder with the website server. Svija Sync runs continuously, enabling the designer to work in Illustrator while the website is updated in real time.

Svija Sync can also be used as a collaboration tool, serving as a simplified form of distributed version control. Since the server contains a complete copy of all the files necessary to work on the website, each team member can download the entire website and upload any modifications.

Svija Tools

Svija Tools is an Adobe Illustrator panel whose main purpose is to export Illustrator files in the SVG format. Svija Tools consists of two panes, simple and advanced.

In addition to saving the SVG file, the simple pane provides a tool to relink all images in the frontmost document to the nearest “Links” folder.

The advanced pane contains the same functionality as the simple pane but also provides tools to duplicate layers from the frontmost document to other documents, to import paragraph and character styles from other Illustrator files, and to reset CSS object ID’s (necessary for manipulating objects with Javascript or CSS).

History

Andrew Swift and Anaÿs

Svija is the creation of Andrew Swift, an American designer and developer who has lived in France since 2000 (Toulouse). From 2002-2008 Swift developed Anaÿs ▲, a tool that enabled the construction of indexable and user-modifiable websites in Flash, based on Adobe Illustrator files.

After the sale of his business in 2010, Swift left the field of technology, planning to become a full-time fine artist. In 2014, realizing that a career in fine art would be difficult to achieve, he decided to return to web-based graphic design.

The end of Flash

With the advent of the iPhone and the increased importance of the mobile web, Flash was no longer an option. The creation of websites had come to be dominated by site-building tools like Wordpress, Wix, Weebly and Squarespace.

Swift, refusing to accept working with HTML, started looking for a vector-based solution. It quickly became apparent that there were only two widely-supported alternatives: the HTML 5 Canvas element and the SVG image format. SVG was chosen because it permitted search-engine indexable text.

Initially it was unclear whether the SVG format would be sufficiently stable for building websites. Swift encountered various problems including: linked images would occasionally fail to appear, SVG content would be displayed at different sizes in different browsers, and Apple’s Safari browser would resize SVG text erratically.

These and other issues were eventually resolved. The first few SVG-based websites were built by hand but over the course of eighteen months in 2015-2016 the process was automated, and Svija was born.

Svija SAS

Beginning in 2017, Swift partnered with web agencies One Cut Studio and Agence Takotak on several Svija-based websites. In 2019, Jean-Philippe Juan and Badre Akaaboune, heads of their respective agencies, proposed a partnership in order to commercialize Svija.

Initially, the intention was to seek funding directly before commercializing the program. However, it quickly became clear that raising funding would depend on being able to show an interested and growing user base.

Since January 2020, efforts have been concentrated on distributing a beta version of the Svija software. Svija SAS was officially created in September, 2020.

N° 379, 2014 · Sitting Figure Based on “Studio di panneggio di una figura seduta” by Leonardo da Vinci. Charcoal and Carbothello on brown Canson paper. 36,0 x 36,0 cm.

Examples

The following images link to existing Svija pages that exhibit features possible only with SVG-based websites. To recreate these pages would be impossible or extremely laborious in HTML.

ozake.com ▲ · antretoise.svija.site ▲ · onecutstudio.com ▲ · svija.love ▲

Whereas HTML-based websites consist exclusively of rows of imprecisely-sized rectangular content blocks, SVG-based websites can exploit content that is:

curved
angled
overlapped or staggered
detailed and precisely positioned
twisted or distorted
continuous across the entire page

Problems with HTML

HTML is a direct descendant of IBM’s Generalized Markup Language (GML), released in 1969. The explicit intent of HTML has always been to describe the structure of a document without describing its appearance. Default characteristics for HTML tags are defined by the browser, not by the HTML standard.

Cascading Style Sheets

Since 1996, Cascading Style Sheets (CSS) have been used to provide standardized formatting rules for page display. Separation of formatting (CSS) and content (HTML) makes it feasible to present the same page in different styles for different rendering methods, such as on-screen, in print, by voice (via speech-based browser or screen reader), and on Braille-based tactile devices.

However, one side effect of this emphasis is that HTML has stagnated graphically. As of 2021, HTML can draw only:

text
images
rectangles
horizontal lines

Additionally, browsers do not all support CSS in the same way; support for CSS functionality is not consistent between them. Multiple coding techniques have been developed to target specific browsers with workarounds (commonly known as CSS hacks or CSS filters). Designing with HTML and CSS

More importantly, the process of doing graphic design with HTML and CSS is extremely complex:

a typical web page can require more than twenty invisible HTML tags to position a single sentence
when an element is incorrectly placed, it is difficult to know which hidden HTML tag is responsible
it is impossible to freely position an element on the page; elements are interlocking and displacing one usually displaces the surrounding elements
creating graphic content that is continuous over a whole page is impossible or extremely cumbersome
simulating a shape other than a rectangle requires the creation of an image of the desired shape

Consequently, most serious websites are developed via a process where the initial design is adapted for the internet by one or more developers who convert it into various blocks of HTML and CSS. The resulting page frequently represents a severely degraded version of the initial design.

Dependence on HTML and CSS means that as of 2021, most major websites remain very simple and follow a similar structure:

content is presented in rows of rectangles
there are few or no shapes other than rectangles
a few large images are used to create graphical interest

This is particularly evident when all the rectangles are made visible, as can be seen in this video ▲.

Example of HTML

This is a paragraph with red text

SVG: a neglected format

The SVG image format, despite being more stable and capable than HTML, has not been adopted for the construction of general web content. There are two reasons why this is the case.

The SVG is not widely understood

As with HTML, the SVG format supports object styling with CSS, and externally linked images and fonts. However, with the exception of Adobe Illustrator, none of the tools available for the creation of SVG content permits exploiting these features.

Programs that do not support linked images and fonts decompose images and fonts into data that is embedded in the SVG. Consequently, reusing a single image or font in several places is not possible, and selecting or indexing text is not possible. The SVG is rendered as an image with no discrete internal content, and cannot be considered a true web page.

The popular perception of SVG has been that it is a format which is extremely useful for logos, icons, and illustrations but not for general web content.

The difficulty of initial experiments with SVG

A second reason why the SVG format has been largely ignored for web content is that whereas it is possible to learn HTML by entering a few tags into a simple text editor, writing even simple SVG code requires a dedicated editing program. Since the browser handles the layout of an HTML page, usable content can be created with minimal effort. Whereas experimenting with website building in HTML requires minimal time and energy, SVG requires more of an investment.

Adobe Illustrator

Adobe Illustrator is the only program that is currently capable of creating real web content in the SVG format. However, while capable of generating usable SVG files, Illustrator offers no tools to manage these files or to present them in a web-page format. And, because Illustrator-created SVG files are not specifically meant for internet use they contain problematic implementation details that must be corrected before they can be integrated into a website.

Additionally, Adobe Illustrator is a paid program with a reputation for being intimidating to the newcomer.

Svija SVG authoring program requirements

Capabilities necessary for web-authoring use:

displaying linked, external images
displaying linked, external fonts
customizable object id’s (necessary for animation)
CSS object styles (necessary for animation and Display P3 color)

Capabilities usefuls for web-authoring use:

reusable text styles
drawing guides

The only SVG authoring program which currently meets these criteria is Adobe Illustrator. Compatibility with Adobe Xd is planned, although Xd does not support linked vector images or images with modified aspect ratios.

The following programs are capable of exporting SVG illustrations but as of November 2021 do not support linking to external images or fonts:

Affinity Designer (Serif)
Amadine ▲ (Belight)
Boxy SVG
CorelDRAW
InVision Studio ▲
LibreOffice Draw
Microsoft Visio
Omnigraffle
OpenOffice Draw
Sketch

Gravit Designer ▲ does not support CSS stylesheets or object IDs.

Inkscape and Sketsa require the installation of third-party frameworks for macOS installation and will be considered when a PC version of Svija is developed.

Example of SVG

Example text

The benefits of Svija

The principal advantages of using Svija over other types of website builder are reduced development time and an improved visitor experience.

Reduced development time

It is possible to develop a Svija website in roughly 20% of the time it would take to create a comparable website using traditional methods.

Rapid design: rather than having to position all content using simple rectangles, most of which are invisible (as is the case with HTML), Svija benefits from thirty five years of development of one of the most powerful graphic design tools available. Artwork is placed directly in the desired position, with no intermediary steps.

Elimination of verification and debugging: HTML was created with the intention that browsers should determine the correct method of drawing each page. Consequently, browsers draw pages in slightly different ways. Once the initial page has been constructed in HTML, there is still a long period of verification and debugging necessary to ensure that the page displays correctly.

There are ten browser/platform combinations with significant important market share that are generally supported:

Windows: Internet Explorer, Edge, Chrome and Firefox
Mac: Safari, Chrome and Firefox
iPhone: Safari and Chrome
Android: Chrome

For an important website, it is necessary to verify the correct functioning of the website on each of these combinations. It is common for web developers to have extra computers available that are used only for website verification.

The benefit of Svija in this regard is that SVG files are displayed identically across all platforms; the entire verification phase is completely eliminated.

Improved visitor experience

The benefits to the visitor of a Svija site are richness, precision and speed.

Richness: whereas HTML limits page design to images, rectangles and horizontal lines, the SVG format supports the entire palette of professional graphic design. Advanced techniques are not only possible, but relatively simple to implement, including overflowing and overlapping objects, twisted or distorted objects, continuity across the entire page, curves and transparency, angled objects and gradients.

In addition to content advantages due to the use of Adobe Illustrator and the SVG format, Svija is the only website builder that provides support for the Display P3 color gamut, which allows for significantly richer colors than the typical website.

The following examples show the advantages of the Display P3 gamut:

top: sRGB

bottom: Display P3

Difference visible on iPhone, Macbook (November 2020 or later), Macbook Pro (October 2016 or later), or iMac (September 2015 or later), in Safari.

Precision: HTML was created with the intention that each browser would dictate the details of page rendering. Although the major browsers have converged on a standard approximate interpretation of CSS, there are still significant differences. It is still difficult to build a website in HTML that requires precise alignment of various elements on the page.

The result has been that web designers have largely abandoned trying to create websites with precise content. It is understood that elements will be slightly out of place, and website design takes this into account. Modern websites all suffer from a lack of detail — it has just not been worthwhile to create designs where perfect alignment is important.

In contrast, the SVG format ensures that elements are displayed exactly as created, down to the smallest detail. For the first time it has become beneficial to invest effort in the creation of precise and complex content: the designer can be confident that his/her website will appear as intended, even without testing it.

Speed: Svija sites load extremely quickly. Although the average personal computer is approximately 5000 times faster in 2020 than it was in 1995 and a typical internet connection is around 3500 times faster, it is still extremely common for websites to take many seconds to load.

There are many reasons for this, but three important factors are:

Page complexity: modern HTML websites require large numbers of hidden elements to correctly place content on the page. It is common for a single sentence to be held in place by 20-30 hidden rectangles. The amount of data needed to display a web page is out of proportion to its visible content.
Drawing calculation: HTML requires the browser to calculate the placement of objects on the page in accordance with CSS directives. In order to draw the visible elements, the browser must first take into account the hidden elements with their complex CSS directives, and calculate the resulting page.
Lack of caching: Most web pages require server-side computation before being sent to the visitor. Page caching refers to the practice of storing this content in a way that obviates the necessity to repeat the same computation each time the page is requested. Although major corporate websites implement caching systems, this technology has been difficult for smaller website builders to integrate.

Svija addresses these three factors in the following ways:

Page complexity is reduced by specifying the placement of each element directly; no hidden elements are necessary;
Drawing calculations are simplified because the SVG format already includes the calculated placement of each element on the page;
Page caching is used systematically except when content viewed by the website administrator.

The computation required to correctly display a web page has been moved from the browser to the web developer’s computer, and the process of constructing the final page is done long before the visitor requests it.

The limitations of Svija

Although most of these issues will be addressed in future releases, the current version of Svija is limited in implementing the following types of content:

Database integration: it is not currently possible to include database-driven content.
Extrememly exensive content: managing the menus for large sets of pages can be unwieldy.
Text-intensive pages: Svija was designed for content with a strong graphic component. Pages that include large amounts of text that may need to be regularly modified can be time-consuming to maintain.
Forms: Svija integrates forms via the CMS administration pages. However complex or multi-page forms can be time-consuming to create and manage.
Integration with other web technologies: the fact that Svija represents a radical break with the existing web paradigm means that integration with other technologies, such MeteorJS, can be difficult.
Advertising integration: advertising platforms that require server-side integration cannot currently be integrated into Svija websites. Svija has stated that this is considered a feature, not a limitation.
Multiple-platform content: content that is meant to be viewed on a larger-than-usual variety of platforms (e.g. watch or automobile screens) can be cumbersome to implement.
Ecommerce integration: ecommerce integration currently requires the creation of a hybrid website with a traditional HTML component and an SVG component.
Reflowing content: Svija does not support reflowing content. It is expected that content for different platforms will be defined by different source documents.

Solutions

There are two types of solutions to these issues available to current users of Svija:

Javascript: Svija allows extensive integration with Javascript in various reusable forms, and many of these limitations can be addressed with programming, included either on specific pages or sections of the website.

Hybridization: many websites can reasonably be divided into a brochure section and one or more functional sections. In these cases it can be effective to use subdomains to create a Svija site for the brochure section and traditional websites for the functional sections.

Future versions of Svija will include plugin functionality and these limitations will be resolved technically.

Responsive web design

Responsive web design is an approach to web design that causes a single web page to be rendered differently on different devices and screen sizes.

The intention is to simplify the process of creating a website by using HTML’s separation of content and style to reuse the same content in different contexts with different style directives.

However, reflowing versions of the same content depending on the platform has serious consequences for the design process.

Even before adding responsive options, HTML website design is limited to hidden rectangles, images and text. When content is moved around automatically depending on the browser, it becomes even more difficult to create pages that render predictably, let alone provide a rich or complex experience.

The Svija Philosophy

Virtually all website builders include options to create responsive websites. However, in most cases, developers have used these options to create two versions: a desktop version and a mobile version. Various elements may also appear or be displaced depending on the exact screen dimensions.

Svija is intended for websites where the content creator wishes to have complete control over the final page. Therefore, a separate, fixed version of each page is created for each version of the website. In most cases this means a desktop version and a mobile version.

Although it may seem like a sacrifice to create separate versions for different platforms, the reality is that most companies who care about providing a strong mobile experience already construct separate mobile websites. And, unlike HTML-based websites, Svija websites are defined in Rem units and adapt automatically to the size of the browser window.

Construction of web pages is so much more rapid using local files in Adobe Illustrator than it is in an online website builder that even with the overhead of creating separate versions, website construction in Svija takes about 80% less time than in a website builder.

Two-and-a-half versions

Most website visitors fall into three easily-defined categories:

desktop
mobile
tablet

Rather than creating adaptive pages that are difficult to design, Svija can meet the needs of almost all visitors with two and a half versions of a website:

desktop version for trackpad/mouse
mobile version for fingertip navigation
tablet version for fingergip based on desktop content + mobile menus

Using Svija does not require adhering to this philosophy, but initial tutorial content is configured in this manner.

Future updates

During the beta phase of development, it is not possible to create an automatically reflowing Svija page. However, updates to the Svija backend will mean that future versions of Svija can include options to automatically reflow content. The result will be Svija pages that load with extreme rapidity yet adapted perfectly to any screen.

The Rem

Svija is unique among website builders in that web pages are continuously adapted to the width of the browser window. The elements of a page are not shifted or repositioned for differently-sized windows. Rather, the content changes size with the window.

This effect is made possible by the use of the Rem unit for positioning the elements of the page.

Most often, web pages are built using the pixel unit. Content that is defined by pixels will not adapt to the screen with which it is viewed. A 1000-pixel wide page will almost fill a 1024-pixel-wide screen and cover less than half of a 2560-pixel wide screen.

The Rem: root Em

In typography, letters are measured in Em’s: the width of an M. This allows various aspects of a text block to be described consistently, regardless of the font size.

On the internet, the Em unit is used in the same way: it measures different aspects of text without taking into account the size of the font.

However, because the definition of the Em depends on the parent of each element on the page, the Rem (Root Em) was created to describe the default font size for the overall page. Unlike the Em, the Rem is constant throughout the document.

Svija uses the Rem to describe the size and position of all the elements of the page. When the window is resized, the Rem definition is updated at the same time so that the content still fits the window perfectly.

Accessibility

Using the SVG format presents some challenges in creating accessible websites.

Although the text in an SVG file is readable by assistive technology (screen readers), it may be broken up or presented out of order.

Adobe Illustrator stores text in the order it is drawn. Elements that are in the background are drawn before elements in the foreground.

When elements do not overlap, it is easy for the designer to, for example, place a headline in front of the following paragraph, without noticing.

In the resulting SVG, the headline would follow the paragraph it is supposed to precede.

A temporary problem

Svija is oriented towards building SVG-only websites because currently the only way to create SVG content is by using Adobe Illustrator.

However, HTML possesses many benefits in the treatment of text, and future versions of Svija will progress towards a hybrid model in which HTML is used for text content and SVG is used for decorative content.

Page construction will remain similar to the existing process, but the conversion of a document to SVG will result in a layered document containing both SVG and HTML elements.

Once hybrid documents are possible, accessibility concerns will no longer be an issue.

Accessibility solutions

Svija has faced criticism ▲ for the idea of building all-SVG websites. It quickly became apparent that solutions were needed if the project were to move forward.

During the initial period before hybrid content becomes feasible, Svija provides two solutions to address the accessibility question:

accessibility field in the Svija CMS: during the beta phase, there is a text field available in Svija Admin page settings where the designer can input any additional text that would make the site more accessible
script to correct text order: Svija Tools will add a script that enables the automatic re-ordering of all the text on the page to ensure that it is accessible to screen readers

The context

Switching from HTML to SVG for building websites represents a paradigm shift in the construction of the Internet. It is a significantly more important change than the move from black and white to color television.

Svija has been clear while accessibility is a priority, the initial absence of a perfect solution is not a reason to put off the transition to SVG. It is by pursuing the transition to SVG that better accessibility solutions will be created.

Search engines

Svija websites are built almost exclusively in the SVG format. This extensive use of SVG has consequences for search engine optimization.

Text

Text inside an SVG tag is indexed normally, but may appear scrambled. The text order depends on the depth (z index) of the text object in the Adobe Illustrator document: in the final SVG file, elements in the back appear before elements drawn in front.

A future update to Svija Tools will introduce an option to automatically reorder text in Adobe Illustrator as part of the process of exporting a file as SVG.

Links

As of August 2016, Google did not follow links inside an SVG tag. Google support for SVG content has consistently improved over time. Research is underway to determine whether SVG links are currently followed.

In the meantime, to ensure that Svija pages are indexed correctly, the Svija backend automatically inserts HTML links between pages.

Structural context

In understanding how to index complex sites, Google depends on the context provided HTML tags. For example, text in an H1 tag (headline) is considered more important than text in a P tag (paragraph).

By default, all the text on a Svija page is of equal importance. There is no provision in the SVG format to differentiate between different structural elements in the text. This is, in fact, a strength of SVG compared to HTML: the designer decides what’s important and makes the final decision about the importance of each element through the design process.

Because Svija is not intended for the creation of extensive, text-based websites, the lack of contextual structure is not considered a limitation. In the future, with the release of Svija Design and hybrid HTML/SVG pages, the question of text structure will be resolved automatically.

Mobile First

Google has declared that beginning on July 1, 2019, mobile-first indexing ▲ will be applied to all new websites. This is not a limitation of Svija, but is included here as a reminder that creating a strong mobile version of each site is particularly important.

Animation

Svija depends on the GSAP ▲ animation library for animation. GSAP (GreenSock Animation Platform) is a comprehensive Javascript animation library that is used by Amazon, Adobe and Google among others.

Initially, animations are programmed in Javascript. Animation depends on the SVG object ID’s attributed by Adobe Illustrator in the Layers panel:

trigger object
target object

First of all, the script defines the trigger object that will listen for the trigger event:

obj = document.getElementById(‘trigger object’); obj.addEventListener(‘mouseover’, playAnim); Then the animation is defined: var myAnim = new gsap.timeline({paused:true}); function playAnim(){ myAnim.play(); } Then the motions included in the animation are defined: myAnim.to(‘#target object’, 1.0, {scale:2.0}); myAnim.to(‘#target object’, 1.0, {x:‘+=5.0’});

Understanding these two transformations:

myAnim.to movement towards a final state, as opposed to from an initial state
the object having the id…
1.0 duration of the transformation in seconds
scale:2.0 increase the scale of the object by a factor of two
x:‘+=5.0’ move the object to the right by 5 REM or 50 pixels

The Animation Lab

The beta version of Svija requires writing animations by hand but it is understood that all designers may not be comfortable with the programming necessary.

Although various pre-written scripts are available, the Animation Lab will provide increasing assistance in the development of complex animations:

selection of trigger and target objects
definition of series of motions
animation timing

Text handling

HTML was conceived with the intent that it be useful for managing large quantities of text, and that the text be machine-readable. It excels at this task: HTML tags supply important information about the structure and content of a page that enable pages to be indexed and categorized automatically, most notably by Google.

The fact that HTML text is styled in accordance with CSS rules has meant that content can be automatically reflowed depending on the platform on which it is viewed: responsive web design.

Both of these qualities depend on computation external to the page: the structural intent is interpreted by the computers at Google, and page display is determined through calculations made by the user’s browser.

In contrast, the SVG format has extremely limited tools for text management. There are no tags for different structural elements, and there is no automatic word wrap. All computation, including breaking text into multiple lines and positioning it correctly, is done when the SVG is created.

SVG-based pages have significant benefits

Svija’s philosophy is that by moving the computation inherent in the creation of web content from the browser to the designer’s computer, important gains can be made in terms of creative freedom, time spent on the design process, and most importantly, time spent verifying the result. Post-design verification has been almost completely eliminated in the construction of Svija websites.

For these reasons, use of the SVG format is considered to be an important advance even though it involves temporarily sacrificing some of the useful qualities of HTML content.

The long-term solution: hybrid SVG/HTML pages

Because Adobe Illustrator is the only SVG-authoring problem currently capable of creating web content, it has been necessary to work within the confines of the Adobe SVG exporter to launch Svija. It is not currently possible to export a file from Adobe Illustrator that combines HTML and SVG content.

However, this situation is temporary. The release of Svija Design will enable websites to benefit from the best of both SVG and HTML. SVG will be used wherever possible, and HTML will be used to display text content with any useful structural information.

Although reflowing text in the browser will not initially be possible, future versions of Svija Design will enable content reflowing through server-side improvements to the Svija CMS.

The Svija Store

Once the beta program has successfully run its course, the Svija Store will make it possible for users of Svija to purchase themes and plugins.

Svija Themes

Sales of themes provide three important benefits:

Because the use of Adobe Illustrator to create web pages allows for a unique liberty of expression, it was recognized early on that designers would need some level of guidance in order to avoid replicating the problems experienced with Adobe Flash. Sales of themes will assist Svija in providing a coherent visitor experience.
Theme sales will provide an important source of revenue to the company.
Sales of themes will provide an important source of revenue to theme designers, indirectly benefiting Svija through the creation of a thriving ecosystem.

To be featured on the Svija Store, themes will have to be designed in accordance with the Svija human interface guidelines.

Svija Plugins

It had been obvious even before launching the beta version of Svija that to make a serious impact on the internet, Svija needed to progress beyond the ability to make simple, static websites.

The solution to this limitation will be the introduction of a plugin API in tandem with an initial plugin offering that will vastly extend Svija’s functionality. Proposed plugins include:

ecommerce and product management
extended form functionality
link-management functionality
SEO management
text management
reservation and calendar management

The future of Svija

Svija is currently in beta and consists of four relatively simple elements:

Svija Sync: a Mac application
Adobe Illustrator
Svija Tools: a CEP tool panel for Adobe Illustrator
Svija Admin: a web-based content management system

As Svija evolves, each of these elements will undergo significant transformation.

Svija Sync: Svija Sync will be rewritten as a full fledged synchronization application for Mac and PC, with options for collaboration and versioning inspired by Github.

Adobe Illustrator: Illustrator was chosen because it is the only ready-to-use program capable of creating (almost) web-ready SVG files. However, at some point Svija Design will replace Illustrator.

Integrating both HTML and SVG in the creation of pages, it will be much better adapted to the creation of complex and dynamic web content. Although the initial release will be relatively simple, along the lines of Pages by Apple, more complex capabilities will be added as the program is developed.

Svija will continue to work with Adobe Illustrator, which is uniquely suited to the creation of graphically complex content.

Svija Tools: currently a collection of tools accessed via an Illustrator panel, Svija Tools will continue to integrate new functionalities. The change will provide several benefits:

accelerated workflow
additional integration of HTML content
additional tools to optimize content for web use
easier installation

Svija Admin: there are many ameliorations planned for Svija, notably:

animation lab to facilitate the creation of GSAP animations
packaging and sharing of pages and modules
automated image optimization
automated font conversion to the WOFF format
automatic backups, integrated into the synchronization process
better tools for coordinating multi-language content
automated accessibility options
automated responsive options

External links

Official website ▲
Documentation website ▲
Svija ▲ on Bēhance
Svija ▲ on Facebook
Svija ▲ on Instagram
Svija ▲ on the Mac App Store
Svija ▲ on Twitter
Svija ▲ on Youtube
The Rem Unit on CSS-Tricks ▲
Developing an entire website with only SVGs ▲ on Stack Overflow

Svija Home · Svija Home · About · · · Imagine · Melitta Filter Sizes · · Svija Home · · Start · · Impossible is now easy · Building a Website with Illustrator is Not Possible · · · · · · · · · Try · · Accueil · Try Svija · Try · Try · Try · WTF · WTF ·