WO2016066587A1

WO2016066587A1 - Svg image customization editor and method

Info

Publication number: WO2016066587A1
Application number: PCT/EP2015/074761
Authority: WO
Inventors: Olivier DE MARNEFFE; Thibaut DEHEM; Thibaut ELZIÈRE
Original assignee: Illustrio Sprl
Priority date: 2014-10-31
Filing date: 2015-10-26
Publication date: 2016-05-06

Abstract

The present invention relates to SVG image customization by means of a computerimplemented image editor and method. More particularly, the present invention concerns an SVG image editor wherein a single instruction to customize at least one attribute (= characteristic such as length, color, scale) characterizing a graphic element identified in an SVG image, triggers at least one additional customization action of at least one additional attribute of said graphic element or of another element of said SVG image or of another SVG image.

Description

SVG IMAGE CUSTOMIZATION EDITOR AND METHOD

TECHNICAL FIELD

[0001] The present invention relates to SVG image customization by means of a computer- implemented image editor and method for creating a customizable SVG image. More particularly, the present invention concerns an SVG image editor wherein a single instruction to customize at least one attribute (e.g., length, color, scale) of a graphic element identified in an SVG image, triggers at least one additional customization action of at least one additional attribute of said graphic element or of another element of the same or of a different SVG image.

BACKGROUND OF THE INVENTION

[0002] Scalable Vector Graphics (SVG) is an extensible Mark-up Language (XML)-based vector image format for two-dimensional graphics and the current internet standard for vector graphics developed by the World Wide Web Consortium (W3C, cf. http://www.w3.org/TR/SVG). Because of its support for interactivity and animation, SVG is currently almost fully-supported by most major web browsers and is gradually gaining wider implementation even outside website design. One current trend contributing to the popularization of the SVG and other existing web standards is the ongoing migration of many aspects of everyday computing from the conventional locally-installed services to the so called cloud. In cloud computing, user data is accessible via a virtualized web interface, most often through a web browser or another specially-designed for this purpose graphic user interface (GUI) in communication with a network, and de facto is stored and processed on a remote networked server. With the current easy access to high-speed internet, it often becomes simpler and cheaper to provide up-to-date applications and services via the cloud than investing in software and IT-support for local installations. Due to these factors, file formats compatible with online computing gain advantage over more traditional alternatives.

[0003] Like most vector graphics, SVG format is independent of the resolution of the rendering device such as a display monitor or a printer. SVG images are essentially textual command files, or metafiles, that provide function calls ("commands") describing straight and curved paths and shapes, as well as other attributes such as color, size, position etc., which can be grouped, styled, transformed and composed into a visual representation of an SVG image. [0004] Inkscape is a drawing program allowing the creation and editing of SVG imaqe files using a WYSIWYG interface for manipulation of image vectors. An end-user of a drawing program such as Inkscape, however, reguires graphical skills to use Inkscape, because creating or amending an image, with vectorial outlines, shapes arrangements and composition, area colouring, and the like must all be defined by the end-user.. An end-user of a drawing program such as Inkscape must, however, have graphical skills and is reguired to make multiple decisions to use Inkscape. For example the end-user will need (a) to edit or draw specific graphical elements and combine them to form an image and (b) to select a number of attribute of each graphical element, (c) to select a value for each of said attributes (e.g., size, outline thickness, colour) of each element or group of elements if the end-user decided to group some of them, and (c) which control to use for each among the many controls available for applying the selected values to the various attributes of the different elements of the image. An end-user having little graphical skills can find little use of drawing programs such as Inkscape.

[0005] US20130207988 describes a method for generating a user interface (Ul) visual presentation attribute scheme while preserving visual consistency of selected visual presentation attributes in the colour scheme. This method does not provide a method for customizing an SVG image in a graphical user interface which can be exported and used elsewhere when completed, but it addresses the customization of the actual user interface (Ul) itself. Additionally, Ul addressed in this method comprise in particular desktop visuals displayed in the screen of computers. Such desktop Ul's are generally not programmed with SVG.

[0006] Creating and manipulating SVG command files at the code-level will generally be considered as too complex for the majority of end-users and designers without programming skills. For this reason, there currently exists a number of readily available SVG image templates and their customization softwares. The latter for example include different SVG image editors that allow application of a user-defined (dynamic) formatting onto a chosen graphic. Another popular SVG customization method commonly supported by most web-browsers is the automatic (i.e. without user interaction, static) application of CSS (Cascading Style Sheets) styling sheets that are highly versatile and can be programmed to simultaneously affect visual representations of even very large groups of SVG images. To date, the powerful and efficient SVG customization methods are largely code-based and not linked to any easy-to learn intuitive interfaces. On the other hand, the currently available GUI-based SVG editors fail to provide the high-throughput and versatility of the CSS styling to the image customization processes.

[0007] One example of a more-complex SVG editor is provided in WO200531598. The editor first transforms an SVG image into an editable version of said image, using a transformation algorithm. Then, said editable image version can be modified by an end-user, using standard customization tools, but only within the extent said transformation algorithm allows to incorporate the introduced modifications into the editable version. As a last step, the final version of the customized editable image is reverted back to an SVG image which can be posted or stored. One of the drawbacks of the editor of WO200531598 is the fact that it transforms a read type of SVG document into an editable document through a fixed transformation algorithm, which means that the existing SVG command file is not used and therefore not all of its elements are made editable, thus losing many potentially controllable elements.

[0008] Further, US2005268216 discloses methods and systems for custom image design, wherein the input from a user is collected through an electronic form, retrieving from a database one or more image templates having one or more variables associated therewith. Then, at least a portion of the user-submitted input is mapped against one or more template variables, thus generating a custom image based on the image template and said at least a portion of the user input. However, the obvious drawback of the-above described method is that once the final image is generated by mapping the user-submitted input, no further modifications can easily be applied any more. [0009] An alternative technique for mapping additional information to an existing SVG object is disclosed in US7210095. The technique involves sending information about an object through an online graphical interface by providing SVG statements associated with a graphical representation of the object. Further the technique uses inserting an anchor for a hyperlink to another resource in order to modify the SVG statements. US7210095 fails, however to disclose a technique for user-customization of an image and also does not teach any means by which the user can interact with generated objects.

[0010] US2007242082 discloses a page design tool that allows simple incorporation of SVG images into display pages by via graphical user interface (GUI) tools. Further, the page design tool provides pre-built code representing "objects" for incorporating metadata-defined images into a page design. The user is able to associate image metadata with an object and the design tool further determines which properties and characteristics of the image are exposed to the user. The major drawback of the design tool of US2007242082 is, however, that the user is required to associate the objects of the SVG file with the metadata himself, which makes complex associations possible only for users having programming skills. [0011] Based on the foregoing review, there remains a need in the field for a user-friendly but powerful image editor for SVG files allowing automatized high-throughput customization of multiple elements or attributes of graphic elements in a smooth, dynamic and highly user controllable manner. The editor and method of the present invention address this and other needs, details of which are presented in continuation.

SUMMARY OF THE INVENTION

[0012] The present invention is defined in the appended independent claims. Preferred embodiments are defined in the dependent claims. In particular, the present invention concerns a computer-implemented image editor for customizing an SVG image and thus creating a customized version of said SVG image which can be exported or printed from the editor, said editor comprising: a Scalable Vector Graphics (SVG) command file available in a database, said SVG command file defining an initial state of said image and comprising one or more identified elements (Ai , i = 1 - n, V n 6 M) each identified element (Ai) being defined by a set of one or more attributes (bi,j, j = 1 - n, V n 6 M), each attribute (bi,j) of a given identified element (Ai) being characterized by a value (vi,j) which can be varied;

an end-user Graphical User Interface (GUI) connected to the database, said end-user GUI comprising a visual representation of the SVG command file;

at least one control (Ci) usable for varying the value (vi,j) of at least one attribute (bi,j) of a given identified element (Ai), said at least one control (Ci) being visually represented on said end-user GUI; characterized in that the use of a control (Ci) to vary the value (vi,j) of an attribute (bi,j) of an identified element (Ai), further referred to as a triggering attribute (bi,j), triggers a rule ( i,j) comprising an instruction to vary the value of one or more target attributes, said value being selected from one or more of the following: the value (vi,k, k = 1 - n and k≠j, V n 6 M) of a target attribute (bi,k), different from the triggering attribute (bi,j), of the same identified element (Ai); or

- the value (vm,j, m = 1 - n and m≠i, V n 6 M) of a target attribute (bm,j), same as the triggering attribute (bi,j), of a different identified element (Am); or

the value (vm,k, k≠j, m≠i) of a target attribute (bm,k) of a different identified element (Am), said targeting attribute (bm,k) being different from the triggering attribute (bi,j), wherein the one or more identified elements (Ai) of the SVG image, the triggering attributes (bi,j), and at least one control (Ci), and rules (Ri,j) have been previously defined by a graphic designer distinct from the end-user. [0013] In a particularly advantageous embodiment of the editor of the invention, the initial SVG command file available in a database is not affected by the customization process such that modifying the at least one attribute (bi,j) is performed on a copy of said initial SVG command file and does not amend said initial SVG command file stored in the database. [0014] In a possible preferred embodiment, the editor of the invention may further comprise a an additional Graphical User Interface (GUI) available for a graphic designer, being either a separate graphic designer GUI connected to the same database as the end-user GUI, or a more advanced mode of the end-user GUI that can be enabled for a graphic artist from within the end-user GUI. In a preferred embodiment, said graphic designer GUI comprises a set of tools for creating or modifying a visual representation of an SVG command file and further comprises additional tools for the following:

Identifying at least one element (Ai , i = 1 - n, V n 6 M) in said visual representation of the at least one SVG command line;

for said at least one identified element (Ai), further identifying j attributes (bi,j, j = 1 - n, V n 6 M) defining said element (Ai);

identifying a value (vi,j) characterizing said at least one identified attribute (bi,j) defining a range or set within which said identified value (vi,j) is comprised and can be varied;

saving all information entered by the graphic designer in said graphic designer GUI as an SVG command file to the database connected to the end-user GUI.

[0015] In a preferred embodiment of the previous embodiment, the graphic designer GUI further comprises tools for: defining a triggering attribute (bi,j) and one or more target attributes;

defining at least one control (Ci) for varying of the value (vi,j) of the thus defined triggering attribute (bi,j) and thereafter the triggering of a rule (Ri,j);

defining said rule (Ri,j) correlating the values of said one or more target attributes to the value (vi,j) of the triggering attribute (bj,j) varied by means of the control (Ci);

saving the foregoing defined control (Ci) and rule (Ri,j) to the database connected to the graphic-designer GUI and/or the end-user GUI;

- selecting among the at least one control (Ci) thus defined to be visually represented on the end-user GUI and thus made available to the end-user. [0016] In a preferred embodiment of the two above embodiments, the tools available to the graphic designer are visually represented on the graphic designer GUI in well-recognizable forms of e.g., buttons, drop-down menus, text boxes etc. which can be interacted with by means of a cursor, keyboard, or touch, such that a graphic designer having limited programming skills is capable of performing the actions provided by said tools individually without additional assistance of a programmer. Thanks to such designed graphic designer GUI, an SVG image can be created by an artist with only basic computer knowledge and without having to work hand in hand with a programming expert.

[0017] In a preferred embodiment of the computer-implemented editor of the invention, the SVG image is selected from a group comprising:

Chart selected from the group comprising pie chart, bar chart, column chart, bubble chart, area chart, radar chart, surface chart, stock chart, scatter chart, linear chart, or a chart comprising any combination thereof;

Map or globe representation with colored areas;

Figurative or abstract representation of a person, a character, an animal, a plant, or an object;

Representation of a measuring instrument showing a set of units according to any system of measurement, such as metric system, imperial system, or US customary measurement system, etc.

[0018] In another preferred embodiment in accordance with the previously-described embodiments, in the computer-implemented editor of the invention at least one attribute (bi,j) of the at least one element (Ai) is selected from a group comprising: color of an area or line, scale, position along a given direction, rotation angle, rotation angle with an anchor point, mirroring, hiding of elements, text, magnitude of a given dimension (radius, angle, length), position of a reference point, and/or combinations thereof.

[0019] Lastly, in another advantageous embodiment of the described herein editor, the end- user GUI also comprises a set of tools allowing the end-user to draw its own new shapes or add new pre-defined elements or delete elements from an SVG image template, so as to create its own composition.

[0020] In another aspect, the present invention further provides a method for creating a customizable Scalable Vector Graphics (SVG) image in a graphic designer Graphical User Interface (GUI), which can be customized in an end-user Graphical User Interface (GUI) by an end-user, said method comprising the steps of: creating or modifying a Scalable Vector Graphics (SVG) command file comprising one or more elements;

identifying in said SVG command line at least one element (Ai , i = 1 - n, V n 6 N) further referred to as the identified element (Ai);

for said at least one identified element (Ai), identifying at least one attribute (bi,j, j = 1 - n, V n 6 N) defining said element (Ai) and characterized by a value (vi,j) which can be varied;

defining a set or range within which said value (vi,j) can be varied;

- creating a control (Ci) associated to said at least one identified element (Ai) through which the value (vi,j) can be varied within the thus defined set or range;

providing a Graphical User Interface (GUI) suitable for rendering a visual representation of the SVG command file and of the control (Ci) allowing the varying of said value (vi,j); and said method being characterized in that, a rule (Ri,j) is defined such that it is triggered by the use of a control (Ci) to vary the value (vi,j) of a triggering attribute (bi,j) of an identified element (Ai), and in that said rule (Ri,j) comprises an instruction to vary the value of one or more target attributes, said value being selected from one or more of the following: the value (vi,k, k = 1 - n and k≠j, V n 6 M) of a target attribute (bi,k), different from the triggering attribute (bi,j), of the same identified element (Ai); or

the value (vm,k, k≠j, m≠i) of a target attribute (bm,k) of a different identified element (Am), said targeting attribute (bm,k) different from the triggering attribute (bi,j).

[0021] In a preferred embodiment of the above-described method, the at least one element (Ai) is identified and labelled in the SVG command file as an object, a corresponding layer comprising one or more objects, a class of objects, and/or combinations thereof.

[0022] In a preferred embodiment of the method of the invention, the control (Ci) for varying the value (vi,j) of a triggering attribute (bi,j) can trigger two or more different rules (Ri,j).

[0023] In another preferred embodiment, a method is provided wherein the defining of the rule (Ri,j) comprises calling a rule (Ri,j) defined in a previously created SVG command file comprising said at least one triggering attribute (bi,j) as well as said one or more target attributes.

[0024] In a further aspect of the method of the invention, the method may additionally comprise the step of defining a group of two or more customizable SVG images sharing at least one same control (Ci) and rule (Ri,j), such that the triggering of said rule (Rj,j) in one customizable SVG image in said group, triggers the same rule (Ri,j) to the other customizable SVG images in said group.

[0025] Generally, in the most preferred embodiments of the invention, the at least one control (Ci) and/or rule (Ri,j) is written in a style sheet language selected from a group comprising: CSS (Cascading Style Sheets), XSL (Extensible Stylesheet Language), Sass (Syntactically Awesome Stylesheets), JSSS (JavaScript Style Sheets), FOSI (Formatted Output Specification Instance), LESS (Leaner CSS), SCSS (Sassy CSS), Stylus, SMIL Timesheets.

BRIEF DESCRIPTION OF FIGURES

[0026] For a fuller understanding of the nature of the present invention, reference is made to the following detailed description taken in conjunction with the accompanying drawings in which:

Figure 1: shows the relationship between an identified element (Al) in an SVG image and its attributes (bl,i) and their values (vl,i).

Figure 2: shows a sequence of events leading to triggering of a rule (Rl,l) according to the invention, said rule comprising instructions for simultaneous customization of more than one attributes in one or more SVG image elements (Al, A2).

Figure 3: shows a conceptual block diagram of a possible three-component embodiment of the SVG editor of the invention. The three functional components are as follows: a graphic user interface or "GUI", a database with defined elements, and a customization engine. An exemplary sequence of operations performed by the user and the editor is shown in Arabic numerals.

Figure 4: shows an example of customization of an SVG image, wherein use of a control (CI) associated with one element (Al), to change said element's shape, triggers a rule (Rl) that results in simultaneous customization of the shape of additional three more elements (A2, A3, A6).

Figure 5: shows another example of an SVG image customization, wherein a rule (R5) is triggered in response to varying the position of the clock's minute hand, said rule comprising instructions to calculate the correct angle between the hands of the clock and adjust the position of the clock's hour hand to display the correct angle.

Figure 6: shows an example of customization of an SVG pie-chart, wherein use of one control triggers two rules, each rule further comprising different customization instructions.

Figure 7: shows an example of three different rules according to the invention, triggered in response to customization of different triggering attributes in an SVG flower image.

Figure 8: shows another SVG customization example wherein input of a text by a user triggers a rule comprising instructions to change the number of subelements of an elements (balloons in a balloon string) and their content.

Figure 9: shows a customization method of an SVG image of a group of trees (identified elements) planted on a piece of land (non-identified element), wherein varying a value of a triggering attribute in one identified element, triggers a rule comprising instructions to vary in an analogous manner values of the corresponding attributes in the remaining elements, both identified and non-identified.

Figure 10: shows a customization method of an SVG image composition (composed of 3 different SVG images depicting a tree and an SVG image depicting a piece of land), wherein modification of one SVG image of the composition via given controls and rules is applied accordingly to other SVG images in said composition that have said controls and rules in common with the first SVG image.

DEATAILED DESCRIPTION OF THE INVENTION

[0027] The present invention generally concerns a computer-implemented editor for customizing an SVG image to create a customized version of the SVG image which can be exported or printed from the editor, said editor comprising: a Scalable Vector Graphics (SVG) command file available in a database, said SVG command file defining an initial state of said image and comprising one or more identified elements (Ai , i = 1— n, V n 6 M) each identified element (Ai) being defined by a set of one or more attributes (bi,j, j = 1 - n, V n 6 M) such as color or a dimension, each attribute (bi,j) of a given identified element (Ai) being characterized by a value (vi,j) which can be varied, for example, a color can be varied between black, white and grey, or a dimension can be varied continuously within a given range;

an end-user Graphical User Interface (GUI) connected to the database, said end- user GUI comprising a visual representation of the SVG command file; - at least one control (Ci) usable for varying the value (vi,j) of at least one attribute

(bi,j) of a given identified element (Ai), said at least one control (Ci) being visually represented on said end-user GUI;

As illustrated in Figure 2, said editor is characterized in that the use of a control (Ci) to vary the value (vi,j) of an attribute (bi,j) (e.g., the color) of an identified element (Ai) (e.g., a square), further referred to as a triggering attribute (bi,j), triggers a rule ( i,j) comprising an instruction to vary the value of one or more target attributes, said value being selected from one or more of the following (cf. Figure 2): the value (vi,k, k = 1 - n and k≠j, V n 6 M) of a target attribute (bi,k), different from the triggering attribute (bi,j)), of the same identified element (Ai) (e.g., a dimension of the square (AI), cf. Figure 2(a));

the value (vm,j, m = 1 - n and m≠i, V n 6 M) of a target attribute (bm,j), same as the triggering attribute (bi,j), of a different identified element (Am) (e.g., the color of a circle (A2), cf. Figure 2(b)); and

the value (vm,k, k≠j, m≠i) of a target attribute (bm,k) of a different identified element (Am), said targeting attribute (bm,k) being different from the triggering attribute (bi,j) (e.g., a dimension of the circle (A2), cf. Figure 2(c)).

[0028] As used herein, the term "computer-implemented" shall be understood as involving the use of any type of a computer, such as a personal or a portable computer, computer network, or other programmable apparatus, where one or more features are realized wholly or partly by means of a computer program. The term "SVG image" refers to a visual representation of a programming code written in SVG language and rendered in a rendering device, such as a display monitor or a printer, capable of reading and interpreting said SVG programming language into two-dimensional graphic content. Conversely, as used herein, the term "SVG command file" should be understood as a sequence of characters written according to the SVG language syntax, which can be rendered to an SVG image by means of an appropriate rendering device capable of reading and interpreting said syntax.

[0029] Further, as used herein, the term "element" is to be understood as any of visually distinctive parts forming an SVG image as well as their corresponding parts in the SVG command file comprising the information sufficient to render the visual representation of said element. For example, an element can be any isolated basic shape as predefined within the SVG standard, such as 'circle', 'ellipse', 'line', 'polygon', 'polyline', but it can also be a specific 'path', or a 'text string'. An element can also be a bitmap image included in the SVG command file by a link reference or contained in the SVG image by any method known in the art such as data U I (Uniform Resource Identifier) scheme. In possible embodiments of the invention, an element can be identified in the SVG command file as an isolated shape, a group of shapes or a layer comprising one or more shapes, a class of shapes, and/or combinations thereof. An example of a group of shapes can be a group of ellipses representing petals of a flower that could be generally identified as a single element labeled as "petals". Another more complex example could involve an SVG image representing a map of Europe, wherein a group of sub- elements representing shapes corresponding to different European countries could be identified as one element labeled "land" or "Europe". The at least one element (Ai) can be identified and labeled in the SVG command file as an object, a corresponding layer comprising one or more objects, a class of objects, and/or combinations thereof.

[0030] The term "identified element" (Ai) refers herein to an element associated with a control (Ci) which allows the variation by the end user of the value of at least one attribute (bi,j) of said identified element (Ai). The variation of the value of an attribute does not necessarily trigger a rule. Only the variation of the value of a triggering attribute triggers a rule and only the value of a triggering attribute of an identified element can be varied to trigger a rule. The rule may, however, vary an attribute of an element other than an identified element. This means that such 'non-identified' element is not associated to a control allowing the direct variation of one of its attributes, but is associated to a rule, triggered by the variation of a triggering attribute of an identified element, which drives the variation of one of its attributes.

[0031] An element of an SVG image is defined by its attributes such as the element's length, height, color, fill, outline etc. As used herein, the term "attribute" shall be understood as any characteristic of an element of an SVG image, as defined either by the standard W3C nomenclature (http://www.w3.org/TR/S G/attindex.html) or as an additional characteristic linked to an element by a programmer or a graphic designer; e.g. an attribute "population" or "surface area" can be defined for each of the shapes representing European countries in an SVG map of Europe. Another example of a non-standard attribute that can be defined for elements forming a picture of a forest, as illustrated in Figure 10, could be an attribute labelled as "season style" which could be varied between any of the four seasons selected from spring, summer, fall, and winter.

[0032] As explained above, only the attributes of identified elements can be varied directly by an end user via a control (Ci). At a given moment, an attribute of a graphic element is characterized by one given value. In case an image is downloaded by the end-user, said attribute will have the initial value attributed thereto by a graphic designer who created said image. In case the end user works on an image on which it has worked before, said attribute will have the value given by the end user the last time it varied it.

[0033] As used herein the term "triggering attribute" shall be understood as any attribute of any identified element of at least one SVG image, which value when varied through a control in the GUI by a user, triggers a rule according to the invention. Analogously, any attribute which value is varied by means of said triggered rule of the invention, as used herein, shall be termed a "target attribute". As can be appreciated by any person skilled in the art, an attribute can be a triggering attribute only to one or more rules, a target attribute only to one or more rules, both a triggering and a target attribute to two or more rules, or can be neither triggering nor target attribute to any rule. A triggering attribute must be an attribute of an identified element, else its value could not be varied by means of a control.

[0034] The present invention aims at providing a simple and intuitive computer-implemented image editor for both end-users and graphic artists alike. With an editor according to the present invention, the varying of the value (vi,j) characterizing an attribute (bi,j) of a given element (Ai) will be possible through a graphic user interface (GUI) and not necessarily at the level of programming the code. To achieve this goal, functions or commands, or as used herein "controls", for varying selected values in an SVG command file, are visually represented and accessible to end-users in the GUI. Examples of commonly-recognized GUI components providing access to such controls include buttons, sliding buttons, manometers, drop-down menus, fields where desired values of an attribute can be directly typed by a user, etc. .

[0035] The image editor of the invention substantially simplifies the SVG image customization procedure through introduction of intelligent rules for simultaneous execution of one or more actions upon varying the value of a triggering attribute of a given identified element (Ai). The one or more actions executed by such rule can be applied on one or more attributes of the same identified element (cf. Figure 2(a) or of a different element, identified or not (cf. Figure 2(b)&(c)). As used herein, the term a "rule" refers to a programmed command automatically signaling to the engine of the editor that amends the SVG image at the level of the SVG command file, to perform one or more additional customization operations together with the customization operation signaled by the end-user through the control in the GUI. Introduction by the present invention of such intelligent rules has the advantage of streamlining the image customization procedure for users unacquainted with the SVG syntax through automatic reduction of the amount of steps necessary for achieving the predicted intended SVG template customization effect. Application of such single rule according the invention can drive simultaneous batch-modification of multiple SVG image components, which otherwise would have to be sequentially modified by the end user through step-by-step calling of individual controls linked to each element individually. Beside increasing the end user comfort, such automation not only accounts for saving computer resources through reduction of CPU usage over time, but also, for online editors accessible on a cloud, it further allows to decrease the bandwidth usage between the local computer of the user and one or more servers on which the editor and its linked databases are stored. [0036] Figure 2 schematically illustrates the action of a rule according to the present invention on other attributes than the triggering attribute which variation triggered the rule. In this example, a user starts with an image comprising two elements - the quadrilateral (Al) already introduced in Figure 1, and an ellipse (A2). At least the element (Al) is an identified element associated with a control (CI). By default Al is a white square and A2 is a white circle. In the Example of Figure 2, the first attribute common to both elements Al and A2 is color (bl,l and b2,l; respectively), whereas the second attribute also common to both elements is the height (bl,2 and b2,2; respectively). Note that the fact that an attribute is common to two elements does not necessarily imply that it can only be varied within the same range for the two elements. For example, if the color of both elements Al, A2 of Figure 2 can be selected from the same two colors: white or shaded, the range within which the height of the element A2 can be varied is not necessarily the same as the one of the element Al.

[0037] An end user wishing to customize this initial SVG image comprising the two elements Al and A2 (viz., Al = white square, A2 = white circle), can use a control (CI) linked in the end user GUI to the element Al, to change said element's color, between white and shaded. Use of the control CI to vary said value (Δνΐ,ΐ) of the color attribute (bl,l), triggers a rule ( l,l) linked to said triggering attribute (bl,l). In the example, rule Rl,l comprises instructions to further vary any of the following:

1. the second attribute (bl,2 = height) of the same square (Al), one height of the quadrilateral (Al) being associated to one color of the same quadrilateral (Al) (cf. Figure 2(a)); or

2. the same attribute (b2,l = color) of the second element (A2 = ellipse), such that ellipse (A2) shall have the same color as the quadrilateral (Al) (cf. Figure 2(b)), or

3. the second attribute (b2,2 = height) of the second element (A2 = ellipse), one height of the ellipse (A2) being associated to one color of the quadrilateral (Al) (cf. Figure 2(c)).

The results of the application of the control CI and the above-listed possible instructions carried by the rule Rl,l are schematically shown as (a), (b), (c) on the right-hand side of Figure 2. [0038] The editor of the present invention provides a fast and simple way of personalizing or customizing even very advanced graphics from an image template available from a database. The end user thus needs not creating an image from scratch, and yet allowing the end user to personalize said image template to a large extent and in a very user friendly manner. In a preferred embodiment, the computer-implemented image editor of the invention provides an end-user GUI in contact with at least one database comprising advanced SVG image templates, previously created by professional graphic designers and/or computer graphic artists and stored in said database. The connection to said database can of be of any type known in the art; most often will be provided through a network interface but also can be provided to the end-user on a portable media carrier such as memory stick, an optical disc, or be locally downloaded to the end-user's storage device of choice from a remote location.

[0039] In an embodiment of the editor of the invention, the action of modifying the at least one attribute (bi,j) does not affect or introduce changes to the initial SVG command file stored in the database. This can be achieved for example in the embodiment of the editor of the invention schematically shown in Figure 3. In this embodiment, a database of distinct code command files includes: one or more SVG command file templates comprising any number of identified elements and attributes; and

controls associated with corresponding identified elements for varying a value characterizing any one of said attributes; and

- rules to be triggered in response to use of given controls for varying the value of a triggering attribute,

Said command files must initially be created by a graphic designer (step 0), and is linked to an end-user GUI. An end-user acting through this end-user GUI sees (step 1) visual interpretations of said SVG command files (i.e. SVG images rendered in said GUI), simply referred to as an "SVG image," and visual interpretations of controls allowing the end user to customize some attributes of identified elements of these SVG images. The end-user can select an SVG image (= "image template") and use a control to vary a value of an attribute of an identified element of the selected SVG image template (step 2) to thus alter the appearance thereof. The information about this variation is compared (step 3) in the customization engine of the editor, running in the background of the end-user GUI, against a copy of the SVG command file encoding for the chosen SVG image template, and against a copy of rules linked with said SVG command file. When a rule linked to the variation of said value is identified (step 4), the variation of the value varied by the user through the control is applied into the copy of the SVG command file together with additional variation of other values of additional attributes, as defined in the identified rule and a customized SVG image is displayed on the end-user GUI, replacing the initially displayed SVG image template (step 5). The above described customization cycle can be repeated until the end-user is satisfied with the result of the SVG image customization and exports or prints said results (step 6) from the editor.

[0040] In an embodiment, the end user GUI of an editor according to the present invention, is provided with a set of tools allowing the end-user to create (draw) its own new SVG image or add new pre-defined elements or delete elements from an SVG image template, so as to create its own composition and to give further freedom of customization of said SVG image template. Such tools are well known in the art and comprise for example a selection of simple shapes, or pencil and brush drawing tools for defining lines and curves, filling areas with color selections, tools for making an animation sequence, inserting other SVG image templates available from the database, etc. [0041] In a more advanced embodiment of the invention, an editor can be provided further comprising a selection of tools available in the end-user GUI that allow the end-user to define his- or her own end user controls and rules, in addition to the ones already defined in the database linked to the end-user GUI. In such embodiment, the end-user could define at least one end-user control (Ck) for varying the value of at least one triggering attribute (bk,m) of an identified element (Ak) and further define an end-user rule ( k,m) such that the variation of the value (vk,m) of said triggering attribute (bk,m) by said end-user control (Ck) triggers said end- user rule (Rk,m) which comprises an instruction to vary one or more of the following: the value (vk,p, p = 1 - n and p≠m, V n 6 M) of a target attribute (bk,p), different from the triggering attribute (bk,m), of the same identified element (Ak); the value (vq,m, q = 1 - n and q≠k, V n 6 M) of a target attribute (bq,m), same as the triggering attribute (bk,m),of a different identified element (Aq); or - the value (vq,p, p≠m, q≠k) of a target attribute (bq,p) of a different identified element (Aq), said targeting attribute different from the triggering attribute (bk,m).

[0042] In the previous embodiment it Is further preferred that the end-user GUI shows a visual representation of simple tools allowing the end-user to select, e.g. by clicking, any of the following:

- one or more triggering attributes;

one or more target attributes;

one or more predefined end-user controls usable for varying a value characterizing said one or more selected triggering attributes;

one or more predefined rules usable for defining an end-user rule ( k,m) to be triggered in response to a variation of a value of the selected triggering attribute, and which triggers a definable variation of a value of one or more selected target attributes.

[0043] In an embodiment in line with the above-embodiment, the end-user GUI can define and use an additional tool for automatically copying and applying a predefined control or rule available from a list in the database to elements or attributes not initially related to the thus selected rule or control. Such end-user controls and rules give the end user a very broad range of customization possibilities never afforded before. Such tools could e.g. be provided as buttons visually represented in the end-user GUI, such as "copy control" or "copy rule" buttons, which could be activated by being clicked on by the end-user, or as options in a drop-down menu called by a right-click made by the end-user on an appropriate component displayed in the GUI.

[0044] In a further embodiment of the invention, the editor can recognize SVG's having a similar architecture, in that they comprise common elements or common attributes labeled in the same way. For example, as illustrated in Figure 10, a piece of land and three different trees, each encoded by a different SVG command file, comprise elements that share several common attributes, for example the attribute bl,l,k ="season style" and bl,2,k = "color", which are shared by k = three trees, A to C (cf. Table 6) . The editor can be programmed to recognize such common elements or attributes in SVG images newly added to the already existing image composition and to suggest to a graphic designer or the end user working on said composition, to automatically apply a pre-defined set of controls and rules to every newly added or created SVG image displaying a similar architecture).

[0045] In an advantageous embodiment of the present invention, the interactions of a graphic designer with the SVG command file is also greatly facilitated. In particular, a computer- implemented editor of the invention is provided further comprising a second and different Graphical User Interface (GUI) for graphic designers, further referred to as the graphic-designer GUI, comprising a set of tools for creating or modifying a visual representation of an SVG command file and further comprising additional visually-represented tools allowing a graphic designer to do any of the following:

- identifying a value (vi,j) characterizing said at least one identified attribute (bi,j) defining a range or set within which said identified value (vi,j) is comprised and can be varied;

saving all information entered by the graphic designer in said graphic designer GUI as an SVG command file to the database connected to the end-user GUI; [0046] In a further embodiment in accordance with the above embodiment, the graphic designer GUI further provides tools for: defining a triggering attribute (bi,j) and one or more target attributes in a chosen element;

saving the foregoing defined control (Ci) and rule (Ri,j) to the database connected to the graphic-designer GUI and/or the end-user GUI; selecting among the at least one control (Ci), and optionally rule (Ri,j), thus defined to be visually represented on the end-user GUI and thus made available to the end- user.

[0047] The graphic designer GUI comprises all the tools available to the end-user and more. The foregoing tools give graphic designers nit having the computer skills required to work directly on an SVG command file, full control of the creation of an image template, and controls of attributes characterizing the elements identified by the graphic designer directly from the graphic designer GUI. Similarly, by selecting rules from a pre-defined list of rules available on the same graphic designer GUI, a graphic designer needs not work in close collaboration with a computer programmer, and create a customizable image on its own.

[0048] In a particular embodiment, the graphic designer GUI can provide a tool to switch to or open a window with a command line interface (CLI) allowing graphic designers or programmers to amend or define SVG command files, controls, or rules directly at the level of written code.

[0049] Examples of SVG images customizable with an editor according to the present invention, comprise:

• Chart selected from the group comprising pie chart, bar chart, column chart, bubble chart, area chart, radar chart, surface chart, stock chart, scatter chart, linear chart, or a chart comprising any combination thereof;

• Map or globe representation with colored areas;

· Figurative or abstract representation of a person, a character, an animal, a plant, or an object;

• Representation of a measuring instrument showing a set of units according to any system of measurement (such as metric system, imperial system, or US customary measurement system, etc.). [0050] The elements (Ai) of an SVG image are characterized by attributes (bi,j) which can be selected from a group comprising: color of an area or line, scale, position along a given direction, rotation angle, rotation angle with an anchor point, mirroring, hiding of elements, text string, magnitude of a given dimension (radius, angle, length), position of a reference point, and/or combinations thereof. Other types of attributes can also be defined, such as a property of an element (e.g., material (= attribute) of the several components (= elements) forming an object), population, GNP, membership to international treaties, etc. (= attributes) of several states (= elements) forming a map). [0051 ] In another aspect of the present invention, a method is provided for a graphic designer to make a customizable Scalable Vector Graphics (SVG) image, said method comprising the following steps: creating or modifying a Scalable Vector Graphics (SVG) command file comprising one or more identified elements(Ai , i = 1 - n, V n 6 M);

for at least one identified element (Ai), identifying at least one attribute (bi,j, j = 1 - n, V n 6 M) defining said element (Ai) and characterized by a value (vi,j) which can be varied;

defining a set or range within which said value (vi,j) can be varied;

providing a Graphical User Interface (GUI) suitable for rendering a visual representation of the SVG command file and of the control (Ci) allowing the varying of said value (vi,j); said method being characterized in that, a rule (Ri,j) is defined such that it is triggered by the use of a control (Ci) to vary the value (vi,j) of a triggering attribute (bi,j) of an identified element (Ai), and in that said rule (Ri,j) comprises an instruction to vary the value of one or more target attributes, said value being selected from one or more of the following: the value (vi,k, k = 1 - n and k≠j, V n 6 M) of a target attribute (bi,k), different from the triggering attribute (bi,j)), of the same identified element (Ai) (e.g., a dimension of the square (AI), cf. Figure 2(a));

[0052] In a preferred embodiment of both the editor and the method of the invention, the control (Ci) for varying the value (vi,j) of a triggering attribute (bi,j) triggers two or more different rules (Ri,j), each comprising different sets of instructions. For example, in the pie chart of Figure 6, changing the %-value (vl,l) of the sector (AI) triggers two rules:

• Rule Rl,la: adapts the %-values of sectors (A2, A3) such that the sum of the %-values of the three sectors is 100% and that the ratio of %-values of the sectors A2 / A3 remains constant; and

• Rule Rl,lb: changes the color of each sector according to the ranking of the respective %-values (highest value = black, and lowest value = white).

[0053] A first rule (Ri,ja) could be programmed to always be triggered upon using the control (Ci) to vary the value (vi,j) of a triggering attribute (bi,j), and a second rule (Ri,jb), different from the first rule (Ri,ja) could be programmed to be triggered only if a given condition is met. For example the second rule could be triggered only in case an element characterized by a target attribute of said second rule is present in the SVG image. Another example, such as illustrated in Figure 10 is the triggering of a second rule only in case the SVG image is composed of several individual SVG images (in Figure 10: trees SVG1 to SVG3). When the triggering of a second rule is thus conditioned, the program will first check whether the condition for triggering said second rule is met before triggering it. This saves computer resources and increases efficacy.

[0054] In another preferred embodiment of the invention, the definition of a rule (Ri,j) can comprise calling or copying a rule (Ri,j) already defined in a previously created SVG command file comprising said at least one triggering attribute (bi,j) as well as said one or more target attributes. Such calling or copying can easily be done at the level of a programming language in which the rule (Ri,j) is written in any suitable CLI, but it is preferably made available to a graphic designer by means of tools represented in the graphic designer GUI, allowing the graphic designer to call a rule from another SVG command file. [0055] Preferably, in accordance with any of the above-listed embodiments, the at least one control (Ci) and/or rule (Ri,j) are written in a style sheet language selected from a group comprising: CSS (Cascading Style Sheets), XSL (Extensible Stylesheet Language), Sass (Syntactically Awesome Stylesheets), JSSS (JavaScript Style Sheets), FOSI (Formatted Output Specification Instance), LESS (Leaner CSS), Stylus, SMIL Timesheets. There exist many other programming languages applicable to the method of the present invention, which will immediately be appreciated by any skilled person.

[0056] In a further embodiment, a method of the invention is provided further comprising the step of defining a group of two or more customizable SVG images sharing at least one same control (Ci) and rule (Ri,j), such that the triggering of said rule (Rj,j) in one customizable SVG image in said group, triggers the same rule (Ri,j) to the other customizable SVG images in said group. For example, as illustrated in Figure 10, a user may be interested in creating an illustration of a forest comprising a plurality of different trees. Each of the visual representations of said different trees displayed in the user's GUI would be encoded by separate SVG command lines, which would share several controls and rules; for example the ones linked to such attributes as foliage, trunk, size, etc. A user wishing to change the style of the entire forest made of a number of trees, would normally have to select each and every tree individually and one-by-one use the same control to vary the foliage style value from, for example "summer foliage" to "fall foliage". The ability to define a group of SVG images that share the same controls and rules, such that triggering of at least one such rule of said images, triggers the same rule in all of the remaining SVG images in the same group, can greatly accelerate customization processes of complex SVG illustrations. In preferred embodiments, defining a group of SVG elements as described above, can be done within the GUI by specially prepared tools such as an "apply-to-all" button. In another example, the customization of a first SVG image member of a group can trigger a rule applying a customization of other SVG images of the same group which are not even opened. Next time one of these SVG images is opened a message can ask the end user whether it is desired to apply the rule triggered by the customization of the first SVG image to the SVG image presently opened.

[0057] Examples of customization of SVG images using a computer implemented editor according to the invention are presented in the following section.

EXAMPLES

Example 1: Clock (Figures 4 & 5) [0058] Figure 4 illustrates an example of an SVG image of a clock customized with a computer implemented editor according to the invention. The clock of Figure 4 is composed of several elements comprising individual or groups of shapes, as listed in Table 1: Al = frame; A2 = main surface, A3 = number ticks (dial); A4 = hour hand; A5 = minute hand; and A6 = central nut. Three attributes are considered for the characterization of the foregoing attributes: · bi,l = size, with i = 1 to 6, which value vi,l may vary between vi,l,l = large and vi,l,2 = small;

• bi,2 = shape, with i = 1 to 3 and 6, which value vi,2 may vary between vi,2,l = circle and vi,2,2 = square; and

• bi,3 = angle of the hands, with i = 4 or 5, which value vi,3 may vary from 0 to 359° (or can be expressed in minutes, varying from 0 to 59 min, or in hours, varying from 0 and

11 h). [0059] As illustrated in Figure 4 and in the one but last column of Table 1, an end user may vary the frame shape from circular to square by means of a control (CI) available in the end user GUI for varying the value of the attribute bl,2 = shape, of the element Al = frame. Attribute bl,2 is a triggering attribute triggering a rule Rl,2 defining that the shapes bi,2, with i = 2, 3, and 6, of elements A2 = main surface; A3 = number ticks; and A6 = central nut (= the target attributes) shall be equal to the shape, bl,2 of the frame Al (in the example a square). Rule Rl,2 may be expressed as follows:

Rl,2: if vl,2 = x (= triggering attribute) => v2,2 = v3,2 = v6,2 = x (= target attributes), with x = {circle or square}

Example in Fig.4: Rl,2: if vl,2 = square => v2,2 = v3,2 = v6,2 = square

Table 1: Clock elements and attributes of Figures 4&5

[0060] It would be sensible to apply similar rules to the commands, C2, C3, and C6 allowing the variation of the shape, bi,2, of elements A2, A3, or A6 triggering a similar rule Ri,2 (i = 2, 3, or 6) in that the target attributes shall have the same shape as the triggering attribute. The use of such rules, Ri,2, are advantageous over prior art editors, in that the change of the shape of the main surface, number ticks, and central nut need not be varied individually and separately after the shape of the frame has been varied by an end-user. Note that in the present example, elements Al, A2, A4 to A6 are individual shapes, whilst element A3 = number ticks, is composed of a group of lines of various thicknesses and lengths.

[0061] In Figure 5 and in the last column in Table 1 supra, another example is presented of customization of the same clock as discussed above with respect to Figure 4. It concerns the angular position of the hour hand as a function of the angular position of the minute hand, considering the hour hand must cover the angular distance separating two adjacent hour ticks (= 30°) as the minute hand rotates 360° around the clock. The time of the clock can be set by an end user by means of control C4 controlling the position of the hour hand (A4) and control C5 controlling the position of the minute hand (A5). In the example represent in Figure 5(a), the initial positions of the hands (A4, A5) correspond to 3 o'clock. The end user can change the time to 3h45 min by means of control C5 controlling the position the minute hand by setting the position thereof to 45 min (or 270°). The variation of the triggering attribute, b5,3 = angle of the minute hand triggers a rule 5,3, setting the angular position of the hour hand between the ticks 3 and 4, by means of a function of the type:

R5,3: v5,3 = x [deg] (= triggering attribute) => v4,3 = f(x) [deg] (= target attribute) according to:

v4,3(x) = v4,3(0) [deg] + x/12 [deg], wherein v4,3(0) = n x 30[deg] with n = 1-12 Example in Fig.5: R5,3: v4,3(0) = 0 [deg] and v5,3 = 270 [deg],

=> v4,4(270) = 0 [deg] + 270/12 [deg] = 22.5 [deg]

[0062] The angular position of the hour hand is the sum, on the one hand, of the value, v4,3(0), which is the position of the hour hand corresponding to the value v4,3 entered by an end user, with the minute hand at 0 min (i.e., at the precise o'clock hour) and, on the other hand, of the fraction of angular sector between two successive ticks corresponding to the fraction of angular sector of the minute hand over a complete rotation, i.e., x / 12 [deg] wherein x is the value of the angular position of the minute hand. This rule permits to obtain a realistic representation of an analog clock without requiring any additional work from the end user.

Example 2: Pie chart (Figure 6) [0063] Figure 6 illustrates a pie chart already briefly discussed supra. It comprises a number of sectors, which can be varied at will. For sake of simplicity, the number of sectors is set in the present example to three and is not varied. As shown in Table 2, the pie chart comprises the following elements and attributes: AO = the chart itself; it is characterized by the attribute, bO,0 = number of sectors, which can vary from 1 to n (V n 6 N); the initial value of b0,0 = 3 and it is not varied here;

Al to A3 = sectors which number is equal to b0,0; they are each characterized by two attributes:

o bi,l = %-value of the sector, with i = 1 to 3, and

o bi,2 = color, with i = 1 to 3.

Table 2: Pie chart elements and attributes of Figure 6

[0064] The color of each sector is controlled by a rule, i,2, setting the color of the sector with highest %-value to black, the sector with lowest %-value to white, and the sector with intermediate %-value to shaded. The initial values, vi,j,0, of the various attributes, bi,j, of the elements of the pie chart of Figure 6 are listed in the one before last column of Table 2. As an end user varies the %-value of a first sector, Al, by means of a control, CI, from an initial value of 45% to a new value of 30%, three rules are triggered: · Rule Rl,la= adapts the %-values of sectors (A2, A3) such that the sum of the %-values of all the sectors is 100% and that the ratio of %-values of the sectors Aj /∑ Aj, with j 1, remains constant after the variation of the %-value of the first sector, Al:

o ∑vi, 1,1 = 100%, with i = 1 to vO, 0 (in Table 2, νΟ,Ο = 3

o Vj,l,l = vj,l,0 /∑vj,l,0 x (100 - vl,l,l), with j = 2 to νΟ,Ο;

In Example 2 of Figure 6, νΟ,Ο = 3;, v2,l,l = 35% / (35% + 25%) x (100 - 30%) = 44.5%; and v3,l,l = 25% / (35% + 25%) x (100 - 30%) = 25.5%

• Rule Rl,lb: changes the color of each sector according to the ranking of the respective %-values (highest %-value = black, lowest %-value = white, intermediate %- value = shaded). The end values, vi,j,l, of the attributes, bi,j, are listed in the last column of Table 2. In this example, the variation of the %-value of sector, Al, triggers two rules, l,la, and Rl,lb, one dealing with the adaption of the areas of the other sectors, and the other dealing with the color of the sectors. It is clear that similar Rules R2,la & R2,lb and R3,la & R3,lb are triggered when the %-values of sectors A2 and A3, are varied by means of controls C2 and C3, respectively, such that the end user can vary the %-value of each sector and still have an automatic adaption of the pie chart.

Example 3: Flowers (Figure 7)

[0065] In the present example 3, illustrated in Figure 7, an SVG image of a flower is displayed on the canvas of the end-user GUI, comprising the identified components as given in Table 3:

Table 3: Flower elements and attributes of Figure 7

The consecutive modifications to the flower SVG images by means of controls and rules associated therewith are shown in Figure 7. Simple rules triggered by the use of the respective controls, e.g., by control CI controlling identified element, Al, can be described as:

Rl,l: if vl = "heart" => v4,l = "thin", else v4,l = "broad" (cf. Figure 7(d)); Rl,2: if vl,2 = "black" => v4,2 = "shaded" , else v4,2 = "white" (cf. Figure 7(c)); Rl,3: v2,3 = v2,4 = vl,3 (cf. Figure 7(b)).

Example 4: Text string in balloons (Figure 8)

[0066] The SVG customizable image of Example 4, illustrated in Figure 8, displays a character holding a number of balloons, each balloon displaying a letter which, positioned side by side, form a text string, such as a name, like Adam or Eve. The character holding the balloons can either be another vector shape written in the SVG command file or a bitmap in any known raster format such as JPEG, GIF, PNG, or TIFF etc., referenced as a link in or incorporated into said SVG command file. The initial and final values of the attributes of the image of Figure 8 are listed in Table 4. Entering a text string (triggering attribute, bl,l) by means of a control, CI, such as changing the text string ADAM by the text string EVE, triggers a Rule, Rl,l, varying the number of balloons (target attribute, bl,3) displayed depending on the number of letter in the text string (attribute, bl,2), and of the number of letters per balloon (attribute, bl,4). Table 4: Text string in balloons; elements and attributes of Figure 8

[0067] In this example, Rule, Rl,l is triggered when a text string (triggering attribute, bl,l) is varied (in Figure 8, initial value, vl,l,0 = ADAM and end value, vl,l,l = EVE). Rule Rl,l varies the value of the target attribute, bl,3 (= number of balloons) following a function:

• vl,l = EVE => vl,2 = 3, and vl,3 = Integer (vl,2 / vl,4) [0068] This example allows the SVG image to be modified in a clever way in that the number of balloons is varied depending on the number of letters in a text string.

Example 5: Trees - single SVG command file (cf. Figure 9)

[0069] Figures 9 & 10 illustrate the same final image composed of three trees, planted in a piece of land. The SVG image of Figure 9 is issued from a single SVG command file whilst the SVG image of Figure 10 is composed by the end user bringing together various SVG command files into a new compositions, wherein each tree is a different SVG command file.

[0070] In the example of Figure 9, the image comprises three identified elements, Al, A2, A3, representing the left tree (Al), central tree (A2), and right tree (A3), respectively, and one element (A4) which is not identified. Each of the identified elements (A1-A3) are characterized by two triggering attributes which can be varied by means of a control (C1-C3) as listed in Table 5: bi,l, with i = 1-3 = "foliage color" which can be selected from lightly shaded (cf. Figure 9(a), medium shaded (cf. Figure 9(b)), dark shaded (cf. Figure 9(c)), and white (cf. Figure 9(d)) corresponding to the color the foliage has in the four seasons of the year: (a) spring, (b) summer, (c) fall, (d) winter; and

bi,2, with i = 1-3 = "foliage size" which can be varied between "large" (cf. Figure 9(b)) and "small" (cf. Figure 9(a)&(c)).

Table 5: trees elements and attributes of Figure 9

[0071 ] If an end user varies the value of a triggering attribute of one of the trees by means of a control, a rule is triggered. For example, the variation of the value, vl,l, of the color of the foliage (= bl,l) of the left tree (= Al) triggers a Rule (Rl,l) by which,

• the size of the foliage of the same left tree (= bl,2) is varied accordingly

• the color (b2,l, b3,l) of the foliage of the central and right trees (A2, A3) is changed accordingly,

• the size (b2,2, b3,2) of the foliage of the central and right trees (A2, A3) is changed accordingly, and

• the color (b4,l) of the land (A4) is changed accordingly (note that the land is not an identified attribute associated with a control).

The variation of the color of the foliage of the central or right trees triggers corresponding rules, R2,l or R3,l, affecting the size and color of the other trees, as well as the color of the land.

Example 6: trees composition - several SVG command files (cf. Figure 10)

[0072] Present Example 6 illustrated in Figure 10 is similar to Example 5 illustrated in Figure 9, but the end user is allowed to compose its own set of trees by picking three different types of trees, A, B, C, from three different SVG command files, SVG1, SVG2, SVG3 (cf. Figure 10(a)). Each SVG command file (SVGi) comprises one identified element, Al,k = tree crown, with k = A, B, C. The triggering attribute of the identified element, Al,k, of each SVG file (SVG,k) is bl,l,k ="season style" which value (bl,l,i) can be varied by means of a control (Cl,k) between the four seasons (a) spring, (b) summer, (c) fall, and (d) winter. The variation of the value of the season style of one SVG command file, for example the left tree corresponding to SVG,1, triggers a rule by which the same attribute (bl,l,j) is varied accordingly for the other two SVG files, SVG2, and SVG3, representing the central and right trees, respectively

Table 6: Trees composition elements and attributes of Figure 9

[0073] In present example 10, a rule can apply to various SVG command files gathered in a same render of a final SVG image composition realized by an end user. By selecting a season for a given SVG command file representing e.g., the left tree, or tree A, not only the features of tree A, such a crown color and size are amended accordingly, but the same applies to the other trees, B & C, of the composition as well as to the ground on which the trees are planted. This function gives an end user a large range of customization possibilities.

[0074] Many other practical applications of the method according to present invention can easily be envisaged by a person with or without programming skills. They include but are not limited to ones involving various modifications of a color of an area or line, scaling a group of elements, their concomitant movement along a given direction, rotation, rotation with an anchor point, mirroring, hiding of elements, change of size in a given dimension (radius, angle, length) etc. Therefore, the above listed examples should not be treated by any means as limiting the scope of the invention.

Claims

1. A computer-implemented editor for customizing an SVG image and creating a customized version of said SVG image which can be exported or printed from the editor, said editor comprising:

- a Scalable Vector Graphics (SVG) command file available in a database, said SVG command file defining an initial state of said image and comprising one or more identified elements (Ai , i = 1— n, V n 6 M) each identified element (Ai) being defined by a set of one or more attributes (bi,j, j = 1 - n, V n 6 M), each attribute (bi,j) of a given identified element (Ai) being characterized by a value (vi,j) which can be varied;

an end-user Graphical User Interface (GUI) connected to the database, said end- user GUI comprising a visual representation of the SVG command file; at least one control (Ci) usable for varying the value (vi,j) of at least one attribute (bi,j) of a given identified element (Ai), said at least one control (Ci) being visually represented on said end-user GUI; characterized in that the use of a control (Ci) to vary the value (vi,j) of an attribute (bi,j) of an identified element (Ai), further referred to as a triggering attribute (bi,j), triggers a rule ( i,j) comprising an instruction to vary the value of one or more target attributes, said value being selected from one or more of the following: - the value (vi,k, k = 1 - n and k≠j, V n 6 M) of a target attribute (bi,k), different from the triggering attribute (bi,j), of the same identified element (Ai); or

the value (vm,j, m = 1 - n and m≠i, V n 6 M) of a target attribute (bm,j), same as the triggering attribute (bi,j), of a different identified element (Am); or

the value (vm,k, k≠j, m≠i) of a target attribute (bm,k) of a different identified element (Am), said targeting attribute (bm,k) being different from the triggering attribute (bi,j),

wherein the one or more identified elements (Ai) of the SVG image, the triggering attributes (bi.i), and at least one control (Ci), and rules (Ri.i) have been previously defined by a graphic designer distinct from the end-user. Computer-implemented editor according to any of claim 1, wherein creating a customized version of the SVG-image by modifying the at least one attribute (bi,j) does not amend the initial SVG command file stored in the database.

Computer-implemented editor according to claims 1 or 2, further comprising a graphic designer Graphical User Interface (GUI) available for a graphic designer, said graphic designer GUI comprising a set of tools for creating or modifying a visual representation of an SVG command file, said graphic designer GUI comprising further tools for the following:

saving all information entered by the graphic designer in said graphic designer GUI as an SVG command file to the database connected to the end-user GUI;

Computer-implemented editor according to claim 3, wherein said graphic designer GUI further comprises tools for: defining a triggering attribute (bi,j) and one or more target attributes;

defining said rule (Ri,j) correlating the values of said one or more target attributes to the value (vi,j) of the triggering attribute (bj,j) varied by means of the control

(Ci);

selecting among the at least one control (Ci) thus defined to be visually represented on the end-user GUI and thus made available to the end-user.

Computer-implemented editor according to any of claims l to 4, wherein the SVG image is selected from a group comprising: Chart selected from the group comprising pie chart, bar chart, column chart, bubble chart, area chart, radar chart, surface chart, stock chart, scatter chart, linear chart, or a chart comprising any combination thereof;

Map or globe representation with colored areas;

Representation of a measuring instrument showing a set of units according to any system of measurement.

Computer-implemented editor according to any of claims 1 to 5, wherein at least one attribute (bi,j) of the at least one element (Ai) is selected from a group comprising: color of an area or line, scale, position along a given direction, rotation angle, rotation angle with an anchor point, mirroring, hiding of elements, text, magnitude of a given dimension (radius, angle, length), position of a reference point, and/or combinations thereof.

Computer-implemented editor according to any of claims 1 to 6, wherein the end-user GUI a set of tools allowing the end-user to add new pre-defined elements or delete elements from an SVG image template, so as to create its own composition.

A method for creating a customizable Scalable Vector Graphics (SVG) image in a graphic designer Graphical User Interface (GUI), which can be customized in an end-user Graphical User Interface (GUI) by an end-user, said method comprising the following steps of:

creating or modifying a Scalable Vector Graphics (SVG) command file comprising one or more elements;

identifying in said SVG command line at least one element (Ai , i = 1 - n, V n 6 M) further referred to as the identified element (Ai);

for said at least one identified element (Ai), identifying at least one attribute (bi,j, j = l - n, V n e N) defining said element (Ai) and characterized by a value (vi,j) which can be varied;

defining a set or range within which said value (vi,j) can be varied;

creating a control (Ci) associated to said at least one identified element (Ai) through which the value (vi,j) can be varied within the thus defined set or range; providing a Graphical User Interface (GUI) suitable for rendering a visual representation of the SVG command file and of the control (Ci) allowing the varying of said value (vi,j); said method being characterized in that, a rule (Ri,j) is defined such that it is triggered by the use of a control (Ci) to vary the value (vi,j) of a triggering attribute (bi,j) of an identified element (Ai), and in that said rule (Ri,j) comprises an instruction to vary the value of one or more target attributes, said value being selected from one or more of the following: the value (vi,k, k = 1 - n and k≠j, V n 6 M) of a target attribute (bi,k), different from the triggering attribute (bi,j), of the same identified element (Ai); or

the value (vm,k, k≠j, m≠i) of a target attribute (bm,k) of a different identified element (Am), said targeting attribute (bm,k) different from the triggering attribute

(bi,j).

9. Method according to claim 8 wherein one control (Ci) for varying the value (vi,j) of a triggering attribute (bi,j) triggers two or more different rules (Ri,j).

10. Method according to any of claims 8 to 9, wherein the defining of the rule (Ri,j) comprises calling a rule (Ri,j) defined in a previously created SVG command file comprising said at least one triggering attribute (bi,j) as well as said one or more target attributes.

11. Method according to any of claims 8 to 10, comprising the step of defining a group of two or more customizable SVG images sharing at least one same control (Ci) and rule (Ri,j), such that the triggering of said rule (Rj,j) in one customizable SVG image in said group, triggers the same rule (Ri,j) to the other customizable SVG images in said group.

12. Method according to any of claims 8 to 11, wherein the at least one control (Ci) and/or rule (Ri,j) are written in a style sheet language selected from a group comprising: CSS (Cascading Style Sheets), XSL (Extensible Stylesheet Language), Sass (Syntactically Awesome Stylesheets), JSSS (JavaScript Style Sheets), FOSI (Formatted Output Specification Instance), LESS (Leaner CSS), SCSS (Sassy CSS), Stylus, SMIL Timesheets. Method according to any of claims 8 to 12, wherein the at least one element (Ai) is identified and labelled in the SVG command file as an object, a corresponding layer comprising one or more objects, a class of objects, and/or combinations thereof.