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 when the visitor and his/her browser determine the appearance of content, HTML is an appropriate solution. However, the SVG format is significantly better adapted to giving complete control to the content creator.

The Svija workflow is as follows:

  1. the user starts a synchronization program, Svija Sync
  2. the user creates content (pages or modules) in Adobe Illustrator
  3. SVG files are exported via an Illustrator script, Svija Tools; any changes are uploaded automatically by Svija Sync
  4. no further work is necessary to consider the content finished
  5. content can be combined, moved or deleted in Svija Admin

As of 2020, 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.

 


 

Overview

SVG-based websites

Svija is designed to facilitate the creation of visually effective, heavily detail-oriented websites. Whereas HTML-based websites are limited graphically and vulnerable to display differences between different platforms and browsers, SVG-based websites 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.

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

In addition to the Svija server installation, Svija Sync continuously synchronizes local content with a server and Svija Tools consists of Adobe Illustrator ActionScripts that facilitate the creation of web content.

Svija (CMS)

Svija (the application) 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 the Illustrator-generated SVG files to specific pages as well as many other administrative tasks.

Svija 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, sitemaps, 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 bash script that synchronizes a local work 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 in collaboration. Since the server contains a complete copy of all files necessary to work on the website, each team member can download the entire website then upload any modifications.

Svija Tools

Svija Tools consists of two Adobe Illustrator ActionScripts, and an Adobe Illustrator template. The main script, Save All as SVG, exports all open Illustrator files in SVG format with the parameters necessary for use as web content.

A second script, Propagate Unlocked Layers, shares elements between open documents, making it easier to work on groups of similar web pages. The template is used for the creation of new pages in an appropriate format.

· accueil · Identité · Try · Accueil · · Start · Imagine · Try · Accueil ·
Small panelto bottom of document Search wikipedia Read   Edit m view history Article   Talk Not logged in | talk | contributions | create account | log in SvijaFrom WTFp*dia, the free encyclopedia 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 when the visitor and his/her browser determine the appearance of content, HTML is an appropriate solution. However, the SVG format is significantly better adapted to giving complete control to the content creator.The Svija workflow is as follows:1. the user starts a synchronization program, Svija Sync2. the user creates content (pages or modules) in Adobe Illustrator3. SVG files are exported via an Illustrator script, Svija Tools;   any changes are uploaded automatically by Svija Sync4. no further work is necessary to consider the content finished5. content can be combined, moved or deleted in Svija (the application)As of 2020, 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≈. "SvijaSVG" redirects here. For the Ukranian cosmetics company see Svija Cosmetics. Developer(s)Initial releaseStable releaseRepositories Written inPlatformAvailable inType LicenseWebsite Svija SAS22 December 22, 20152.1.6 · 27 July 2020github.com/svijasvg/svija-sync, github.com/svijasvg/svija-toolsDjango, Python, PostgreSQLMac (Apple)English, Frenchwebsite builderBSD (Svija Tools, Svija Sync)svija.love 1234567891011121314151617 OverviewHistoryExamplesProblems with HTMLSVG: a neglected formatThe benefits of SvijaThe limitations of SvijaResponsive web designThe RemAccessibilitySearch EnginesAnimationText HandlingThe Svija StoreThe future of SvijaSee alsoExternal links Contents Categories: free software | programmed in python | python web frameworks | software using the bsd license This page was last edited on 2 September 2020, at 13:50 |UTC|.Text is available under the Creative Commons Attribution-ShareAlike License; additional terms may apply. By using this site, you agree to the Terms of Use and Privacy Policy. Wikipedia® is a registered trademark of the Wikimedia Foundation, Inc., a non-profit organization.Privacy Policy | About Wikipedia | Disclaimers | Contact Wikipedia | Developers | Statistics | Cookie Statement | Mobile View OverviewSVG-based websitesSvija is designed to facilitate the creation of visually effective, heavily detail-oriented websites. Whereas HTML-based websites are limited graphically and vulnerable to display differences between different platforms and browsers, SVG-based websites 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 SvijaAlthough there are plans to release a proprietary authoring tool, Svija currently uses Adobe Illustrator for page layout.The Svija CMS program consists of a web interface that enables content management, combined with an additional server-side component that adapts Illustrator-exported SVG pages for website use.In addition to the Svija server installation, Svija Sync continuously synchronizes local content with a server and Svija Tools consists of Adobe Illustrator ActionScripts that facilitate the creation of web content.Svija AdminSvija 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 the Illustrator-generated SVG files to specific pages as well as many other administrative tasks.Svija 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, sitemaps, 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 SyncSvija Sync is a Mac bash script that synchronizes a local work 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 in collaboration. Since the server contains a complete copy of all files necessary to work on the website, each team member can download the entire website then upload any modifications.Svija ToolsSvija Tools consists of two Adobe Illustrator ActionScripts, and an Adobe Illustrator template. The main script, Save All as SVG, exports all open Illustrator files in SVG format with the parameters necessary for use as web content.A second script, Propagate Unlocked Layers, shares elements between open documents, making it easier to work on groups of similar web pages. The template is used for the creation of new pages in an appropriate format. AA HistoryAndrew Swift and AnaÿsSvija 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 FlashWith 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 included searchable text.Initially it was unclear whether the SVG format would actually be usable for building websites. Various issues came to light: linked images would appear incorrectly, not all browsers could dynamically resize SVG content, and the Safari browser resized 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 SASBeginning 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, it was decided to seek funding directly before publicizing 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 preparing a beta version of the Svija software. Svija SAS was officially created in September, 2020. n° 379, 2014 · Sitting FigureBased 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. ExamplesThe 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. 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 ozake.com≈ · antretoise.svija.site≈ · onecutstudio.com≈ · svija.love≈ Problems with HTMLHTML 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 markup are defined by the browser, not by the HTML standard.Cascading Style SheetsSince 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 graphically, HTML has remained extremely basic. As of 2020, HTML can draw only:• text• images• rectangles• horizontal linesAdditionally, 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 CSSMore 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 • positioning an element on the page is done relative to other elements; displacing one element can cause a ripple effect throughout the page• creating graphic content that is continuous over a whole page is extremely cumbersome• simulating a shape other than a rectangle requires the creation of an image of the desired shapeConsequently, 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.Dependence on HTML and CSS means that as of 2020, 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 create graphical interestThis is particularly evident when all the rectangles are made visible, as can be seen in this video≈.Example of HTML<html>   <head>     <style>       p {color:red}     </style>   </head>   <body>     <p>       This is a paragraph with red text     </p>   </body> </html> SVG: a neglected formatThe 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 understoodAs does 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 experimenting with SVGA second reason why the SVG format has been largely ignored for web content is that whereas it is possible to begin using HTML by entering a few tags into a simple text editor, writing SVG code requires a specialized program to even begin. Since the browser handles the layout of an HTML page, usable content can be created with minimal effort. The time and energy investment necessary to experiment with website building is essentially zero for HTML and relatively elevated for SVG.Adobe IllustratorAdobe Illustrator is the only program that is 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 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 requirementsCapabilities necessary for Svija compatibility:• Mac application• custom object id's (necessary for animation)• CSS styles for objects (necessary for animation and Display P3 color)• links to external bitmapped images• links to external vector images• links to external fontsCapabilities useful for Svija compatibility:• reusable text styles• drawing guidesThe only SVG authoring program which meets all the criteria is Adobe Illustrator. Compatibility with Adobe Xd will be added, although it does not support linked vector images or images with modified aspect ratios.The following programs are capable of exporting SVG illustrations but as of September 2020 do not support linking to external images or fonts:Affinity Designer (Serif)Amadine≈ (Belight)Boxy SVGCorelDRAWInVision Studio≈LibreOffice DrawMicrosoft VisioOmnigraffleOpenOffice DrawSketchGravit 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<svg height="100" width="100">   <circle cx="50" cy="50" r="40" stroke="black" stroke-width="1" />   <text x="0" y="15" fill="red">Example text</text> </svg> The benefits of SvijaThe principal advantages of using Svija over other types of website builder are reduced development time and an improved visitor experience.Reduced development timeIt 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 FirefoxMac: Safari, Chrome and FirefoxiPhone: Safari and ChromeAndroid: ChromeFor 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 experienceThe 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: 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 interpretation of CSS, there are still significant differences. It has been 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 web sites 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.Page 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. top: sRGB bottom: Display P3 Difference visible on iPhone, iMac from September 2015 or more recent, or a Macbook Pro from October 2016 or more recent, in Safari or Firefox. The limitations of SvijaAlthough 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.Extensive 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.SolutionsThere 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 designResponsive 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.Before even considering 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 extremely difficult to create pages that render predictably, let alone provide a rich or complex experience.The Svija PhilosophyWhile virtually all website builders include options to create responsive websites. 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 60-80% less time than in a website builder.Two-and-a-half versionsMost website visitors fall into three easily-defined categories:• desktop• mobile• tabletRather 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 finger• tablet version for finger = desktop content + mobile menusUsing Svija does not require adhering to this philosophy, but initial tutorial content is configured in this manner.Future updatesDuring 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 are adapted to any screen. The RemSvija 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 for positioning the elements of the page.Traditionally, web pages are built using the pixel unit. Content that is defined by pixels will not adapt to the computer 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 EmIn typography, letters are measured in Em's: the width of the letter M. In this way, various aspects of a text can 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 Em is defined differently for 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 the content still fits the window perfectly. AccessibilityUsing 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 problemSvija 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 create a layered document containing both SVG and HTML elements.Once hybrid documents are possible, accessibility concerns will no longer be an issue.Accessibility solutionsSvija 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 interim period before hybrid content becomes possible, Svija has proposed two solutions to address the accessibility question:• accessibility field in the Svija CMS: during the beta phase, there is a text field available in the administration page 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 readersThe contextSwitching 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 a transition to SVG.It is by pursuing the transition to SVG that better accessibility solutions will be created. Search enginesSvija websites are built almost exclusively in the SVG format. Extensive use of SVG has consequences for search engine optimization.TextText inside an SVG tag is indexed normally, but may appear scrambled. The text order depends on the depth of the text object in the Adobe Illustrator document: in the final SVG file, deeper elements appear before more superficial elements.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.LinksAs 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 contextIn understanding how to index complex sites, Google depends on the context provided HTML tags. 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, the 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 FirstGoogle 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. AnimationSvija 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 objectFirst 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 twox:'+=5.0'   move the object to the right by 5 REM or 50 pixelsThe Animation LabThe 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 handlingHTML 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 benefitsSvija'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 creativity freedom, time spent creating, 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.Hybrid SVG/HTML pages are the long-term solutionBecause 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 format to launch Svija. It is not currently 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 StoreOnce 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 ThemesSales 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 PluginsIt 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 SvijaSvija is currently in beta and consists of four relatively simple elements:1. Svija Sync: a bash script for Mac2. Adobe Illustrator3. Svija Tools: ActionScripts for Adobe Illustrator4. Svija Admin: a web-based content management systemAs 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, Svija Design will at some point 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 ActionScripts (programmed in Javascript), Svija Tools will be re-released as a cross-platform Adobe Illustrator plugin. The change will provide several benefits:• accelerated workflow• additional integration of HTML content• additional tools to optimize content for web use• easier installationSvija 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• automatic backups, integrated into the synchronization process• better tools for coordinating multi-language content• automated accessibility options• automated responsive options See alsoEm (typography) CSS HTML Responsive web design Scalable Vector Graphics Standard Generalized Markup Language Website builder External linksOfficial website≈ Documentation website≈ Svija≈ on Bēhance Svija≈ on Facebook Svija≈ on Github Svija≈ on Instagram Svija≈ on Twitter Svija≈ on Youtube The Rem Unit on CSS-Tricks≈ Developing an entire website with only SVGs≈ on Stack Overflow VISIT ON MOBILE · 34 RUE JEAN GIRAUDOUX · 03300 CUSSET · FRANCE CONTACT@SVIJA.LOVE EMAIL IMAGINEWTF STARTTRY IT Your choice will not effect the quality of your experience. ACCEPT COOKIES?NO YES