Smart svg icons

Abstract

Computer-implemented method and system enable rendering scalable vector icons used in a computer application. An icon engine retrieves a single icon file from a library, the icon file having graphic information for a plurality of defined icon sizes and color themes defined using vectors for each of a plurality of icon sizes with unique elements assigned to a respective size layer. Icon modes of an active computer application are identified, such as size mode and color theme mode. Layer activation for features assigned to a size mode for the icon is based on the identified icon mode. Color theme for the icon is based on the identified color theme mode. The icon data file is configured according to the selected layer activation and color theme and rendered on a computer display.

Description

SMART SVG ICONSTECHNICAL FIELD

[0001] This application relates to computer display software. More particularly, this application relates to improved file formatting for scalable vector images used to represent computer display icons.BACKGROUND

[0002] As part of the graphical user interface of a computer system, an icon is a pictogram or ideogram displayed to assist a user navigate the computer system. The icon is a link to a software tool, function or data file, serving as an electronic hyper link or file shortcut to access the program or data. The user can activate the icon using a mouse, pointer, finger without knowing anything further about the location or requirements of the file or code. In computer application development, icons are often designed to model items as a graphical representation that can be intuitive to the user without having text labels. The icon image is often needed at different sizes to harmonize with variable computer display settings (e.g., dpi scale) depending on how the display settings for a running software application and / or the display itself are configured. Maintaining a unique icon data file for each size is resource costly and multiplies the cost and effort of maintenance.

[0003] Icons configured as vector images, such as the scalable vector graphics (SVG) format (https: / / www.w3.org / TR / SVG2 / ), scale well in most cases. However, when rendered at the smaller sizes, there can be too much detail which is hard to discern by the human eye at the small size. This can lead to end user confusion and produces a lessthan professional appearance. The image must be authored to certain specifications to avoid this scaling effect. This is particularly challenging when a single icon will be rendered at multiple sizes. It is common practice to define multiple icon data files to accommodate the different sizes and avoid this problem. There is no method or functionality available to use a single icon data file for multiple sizes.

[0004] It is also common for computer applications to provide multiple themes to tune the experience to the user’s preference (e.g., dark theme and light themes). Icons need to adapt to the selected theme to provide the best possible experience. Web browsers and cascading style sheets (CSS) provide limited support for changing a single color of SVG icons. Changing only one color in an icon to support multiple themes is insufficient for non-monochromatic images. There is currently no method or functionality available to use a single icon data file for two or more themes.SUMMARY

[0005] A computer implemented system and method enable rendering of scalable vector icons used in a computer application framework using a single icon data file. An icon engine retrieves a single icon file from a library, the icon file having graphic information for a plurality of defined icon sizes and color themes defined using style sheets for each of a plurality of icon sizes with unique elements assigned to a respective size layer. Icon modes of an active computer application are identified, such as size mode and color theme mode. Layer activation for features assigned to a size mode for the icon is based on the identified icon mode. Color theme for the icon is based on the identified color theme mode. The icon data file is configured according to the selected layer activation and color theme and rendered on a computer display.BRIEF DESCRIPTION OF THE DRAWINGS

[0006] Non-limiting and non-exhaustive embodiments of the present disclosure are described with reference to the following FIGURES, wherein like reference numerals refer to like elements throughout the drawings unless otherwise specified.

[0007] FIG. 1 illustrates an example of a framework for defeaturing an icon for smaller sizes and layer control for rendering a single icon file in accordance with embodiments of this disclosure.

[0008] FIG. 2 illustrates an example of a framework for dynamically altering color of an icon for various color themes in accordance with embodiments of this disclosure.

[0009] FIG. 3 illustrates an example of a scalable pixel boundary alignment for a single icon file in accordance with embodiments of this disclosure.

[0010] FIG. 4 shows an example of a computing environment in which embodiments of the present disclosure may operate.DETAILED DESCRIPTION

[0011] Methods and systems disclosed herein use a configurable icon engine useful for a graphic designer when designing scalable vector icons displayable on a computer application. In contrast with prior art solutions, a single icon file is generated and contains all information for scalable versions of the icon, as well as various themed color schemes for the icon. Features, such as graphical details, are defined specific to different sizes of the icon and are assigned to respective layers. Icon designs can also be varied according to various color themes and rendering of the different versions can be controlled according to available style sheets attributable to the single icon file. When the icon is tobe rendered, the current size and color theme for the active desktop application is indicated in the icon request, and the appropriate version of the icon is rendered by controlling size-specific layer activation and extracting the color information from the style sheet.

[0012] FIG. 1 illustrates an example of a framework for defeaturing an icon for smaller sizes and layer control for rendering a scalable vector icon from a single icon file in accordance with embodiments of this disclosure. Icon engine 101 is configured to customize rendering of a scalable vector icon on a computer display. In an embodiment, Icon engine 101 is configurable using a cross-platform framework (e.g., Qt) for developing desktop applications. For example, the icon engine 101 enables rendering icons on computer screens for buttons and other views. The proposed methods have broader applicability beyond the Qt desktop environment. For example, the methods can also apply to other frameworks which support custom icon rendering such as Windows Presentation Foundation and WxWidgets. Javascript for web browsers is another potential application.

[0013] Icon engine 101 is configured with new functionality for scalable vector icons, such as SVG icons, which is the defeaturing of an icon at smaller sizes using a “layer” element. In this example, the icon is designed to have different renderings for two defined sizes, large and small. The icon engine 101 defines one or more layers for each defined size. Graphic features or elements of the icon considered to be poorly rendered (e.g., difficult to be discerned by the human eye) at the small size are "defeatured" (i.e. , omitted) from the "small" layer associate with the small size and reserved for the large size by allotment to a layer named “large”. For example, as shown in FIG. 1 , the small size icon151 is defeatured by eliminating the hash mark details 142 reserved for the large size icon 141. In contrast, the standard approach for icon design renders hash mark feature 122 for both large size 121 and small size 131.

[0014] The process for rendering scalable vector icons is as follows. Icon engine 101 provides an interface platform for a user (e.g., a graphic designer) to define each icon with some common features and some unique features for two or more defined sizes. For this example, the unique features of a large size icon are assigned to a designated large layer as described above, and unique features for a small size icon are assigned to a designated small layer. Accordingly, icon engine 101 is configured with the novel feature of a mechanism for turning one or more layers on or off at the time of rendering to enable dynamic scalable icon rendering. A single icon data file stores these layer assignments as vectors.

[0015] To initialize the rendering of the icon, icon engine 101 sends lnitializeRenderer() command 102, which identifies the icon by name and retrieves a single icon data file from a library. The icon data file includes graphic information for all defined icon sizes.

[0016] At step 103, icon engine 101 is configured to identify icon modes of an active computer application in which the icon is to be rendered. With this example, the icon mode being identified is icon size. For instance, the icon size mode may be based on a number of factors, including but not limited to: (1) the active computer application running with all icons or a subset of icons are set to small size according to a default feature setting or manually selected by the user, (2) the size of an active window on the display screen where the application resides, (3) the aspect ratio setting of the display screen. In anaspect, icon sizes may vary across the active computer application, with some icons set to small size and other icons set to large icons by design choice. If icon engine 101 determines that the icon size is small size, then icon engine 101 selects a layer activation for features assigned to the defined small size icon. This may be implemented by removing the large layer at step 104 so that only defeatured aspects are activated for the dynamic rendering by rendering engine 107. In this case, when rendering the icon image, the large layer is hidden when a small size is requested. Otherwise at the initialization step 103, if icon engine 101 determines that the conditions indicate a large size icon is required, then a layer activation is selected for rendering features assigned to the defined large icon size. This may be implemented by removing the small layer at step 105, leaving only the large layer activated for the dynamic rendering by rendering engine 107.

[0017] Conversely, the small layer may be hidden by deactivating the small layer when a large size is requested for rendering. In this case, the small layer may include specific features desired only for the small size, and the small layer is not rendered when the large size is selected.

[0018] With the layer activation 104, 105 being selected, icon engine 101 reads the icon data from a file, modifies the icon data to a configuration corresponding with the selected layer activation, and passes the modified data to rendering engine 107. Rendering engine 107 then performs the dynamic rendering based on the configured icon data file.

[0019] This technique is not limited to small and large sizes. Any requested size, such as a medium size, may have unique elements to display, and can be assigned to a corresponding controllable layer.

[0020] As an alternative to the example shown in FIG. 1 , the defeaturing for small size icon rendering may be configured such that only a large layer is defined to have unique features on top of a background layer that represents the small size icon features. For this case, when a large size icon rendering is required, steps 104 and 105 produce a toggling of large layer to be deactivated at step 104 for revealing only the background layer for a small size icon rendering, or activated so that unique features for the large size icon are rendered over the background layer for a large size icon rendering. In an aspect of the latter case, with the small layer being a background layer to the large layer, features of both layers are rendered at once when the large size icon rendering is selected.

[0021] FIG. 2 illustrates an example of a framework for dynamically altering color of an icon for various color themes in accordance with embodiments of this disclosure. In an embodiment, a library stores code that implements the logic of the disclosed framework. In addition to the embodiments described above with respect to scalable icon features according the icon size mode, icon engine 101 is configured with an interface platform the enables a user (e.g., graphic designer) to define each icon with some common color-based features or elements and some unique color-based features or elements. The scalable vector icon includes a style sheet feature that enables different color themed versions for a particular icon. As shown in FIG. 2, a two color scheme palette includes a light theme version for icons 211 , 212 and a counterpart dark theme version of icons 221 , 222. Graphic elements of an icon include line / outline color and fill color. A style sheet vector is defined by name and color (e.g., [name, color]). The scope of the disclosed embodiments is not limited to a two color palette as shown; the style sheet vector theme may include additional color themes. As an example for the style sheetvector definition, the vector scale for the available style sheets of icons 211 , 212, 221 ,222 may pair a color code to each of one or more icon elements as follows: name: dark, light color: RGB value [0-255]C_A1 defines light theme fill color 1C_A2 defines light theme fill color 2C_B1 defines dark theme fill color 1C_B2 defines dark theme fill color 2C_C defines light theme line colorC_D defines dark theme line color

[0022] To initialize the rendering of an icon, icon engine 101 sends an initializeRenderer() command 202, which identifies the icon by name and retrieves a single icon data file from a library. The icon data file includes the style sheet information with all defined color themes for the icon.

[0023] At step 203, icon engine 101 is configured to identify icon modes of an active computer application in which the icon is to be rendered, such as color theme for this example. If the computer display setting and / or application in which the icon is to be rendered is applying a dark theme, then icon engine 101 applies the predefined color attributes of the dark theme palette for the icon to be rendered, which applies a dark palette 204 in this instance. Otherwise, should the icon engine 101 detect a light theme activated in the running application at 203, then the light palette is applied 205 at the timeof rendering 206. As an example of rendering 206 the graphic elements of icon 212, a rendering instruction may be configured as follows. For white arrow element, start at point A with coordinates (xo, yo), draw a line to point B with coordinates (xi, yi) using color C_C. For lower left square element, draw a rectangle with coordinates (X2, y2)(xs,ys) using fill color C_A1. For upper right square element, draw a rectangle with coordinates (X4, y4)(x4,y4) using fill color C_A2.

[0024] With the color theme applied at 204, 205, icon engine 101 reads the icon data file, modifies the data based on the selected color theme, and passes the modified data to rendering engine 107. Rendering engine 107 then performs the dynamic rendering based on the configured icon data.

[0025] An advantage of the style sheet mapping scheme described above is to permit universal updates for changes to color themes where one change to the library code can change the rendering for an entire set of icons. For example, changing color C_A1 from blue (RGB value x) to red (RGB value y) in the library then enables all icons mapped to color C_A1 to be rendered with the new color for the updated theme, without having to revise every icon bitmap file individually as with conventional icon design coding.

[0026] Icon rendering has been described so far with respect to size mode (FIG. 1), and color mode (FIG. 2). An additional mode for rendering can include activity state for the corresponding icon activity, i.e. , whether the icon is in enabled or disabled mode. For example, a computer application may have different user states in which an available action for the user may disabled to prevent conflicts with other current activities. To allow the user to recognize whether an icon is disabled (i.e., the action triggered by clicking on the icon is currently prohibited by the running application, therefore the icon is notavailable), the icon rendering of lines and fill may be altered by a lighter shade (or transparent effect) than for rendering the icon in an enabled mode. This enable / disable mode may be a two shade vector scale, or additional shades may be added as required to represent other possible states for the corresponding activity represented by the icon. The number of adjustable vector modes for rendering scalable vector icons may be expanded without limit beyond size, color and activity state as described above.

[0027] FIG. 3 illustrates an example of a scalable pixel boundary alignment for a single icon file in accordance with embodiments of this disclosure. Blurry scaled images are avoided by aligning the edges of elements in a scalable vector icon with pixel boundaries, particularly helpful for outline-style icons to have crisp edges. In an embodiment, elements of an icon are aligned to pixel boundaries for any scalable icon size. Icon engine 101 defines an icon canvas size with a convenient size. For example, a canvas size 301 of 96x96 pixels may be defined, which is evenly divisible by common icon sizes used in most applications: 48, 32, 24, 16. A grid cell size 302 is set (e.g., cell size = 6x6 pixels) by icon engine 101 and the icon origin is offset from the canvas grid origin (0,0) (e.g., icon origin = (3,3)). Icon engine selects locations of line elements, such as the outline of the icon, to correspond with the defined grid (or "snapped" to the grid). This ensures that every line element is drawn on the grid precisely aligned with boundaries of one or more pixel units (i.e., avoiding lines defined by partial pixels), to maintain lines with a crisp appearance at any scalable size. Icon engine 101 draws elements with simple strokes, instead of a conventional approach of drawing with “filled paths” where both edges of the outline are drawn and then the space between is filled. To provide bolder lines for large size icons 311 , icon engine sets a wider stroke width (e.g., stroke-width=2 pixels). Iconengine 101 uses the same stroke width at any size. For example, in an instance of an SVG implementation, the "vector-effect"="non-scaling-stroke" attribute is used. To modify the icon rendering for the small size 312, icon engine 101 adjusts to a lower value stroke width (e.g., stroke-width = 1 pixel). This pixel width enhancement, together with the pixel alignment, produces crisp icon images at any supported icon size.

[0028] FIG. 4 shows an example of a computing environment in which embodiments of the present disclosure may operate. Computer system 410 may be embodied, for example and without limitation, as a computing device for rendering scalable vector icons used in computer applications.

[0029] Processors 415 may include one or more GPUs and one or more central processing units (CPUs). System memory 416 stores information and instructions to be executed by processors 415 and may be used for storing temporary variables or other intermediate information during the execution of instructions by processors 415. System memory 416 may contain data and / or program modules that are immediately accessible to and / or presently being operated on by the processors 415, such as icon engine module 411 , a rendering engine module 412, and operating system 413. For this example, module 411 is configured to execute the functionality of the icon engine 101 , and module 412 is configured to execute the functionality of the rendering engine 107 as described above with reference to FIGs. 1-3.

[0030] Computing system 410 may also include a user interface module 423 for communicating with a graphical user interface 424 that includes a display device to display information to a computer user, one or more input devices, such as a keyboard or pointing device, for interacting with a computer user and providing information to theprocessors 415. The display device may provide a touch screen interface which allows input to supplement or replace the communication of direction information and command selections.

[0031] The computing system 410 may perform a portion or all of the processing steps of embodiments of the disclosure in response to the processors 415 executing one or more sequences of one or more instructions contained in a memory, such as the system memory 416. Such instructions may be read into the system memory 416 from another computer readable storage medium, such as local storage device 422, implemented as a magnetic hard disk or a removable media drive. The local storage device 422 may contain one or more datastores and data files used by embodiments of the present disclosure, such as for the library of style sheets and other icon file information. Datastore contents and data files may be encrypted to improve security. The processors 415 may also be employed in a multi-processing arrangement to execute the one or more sequences of instructions contained in system memory 416. In alternative embodiments, hard-wired circuitry may be used in place of or in combination with software instructions. Thus, embodiments are not limited to any specific combination of hardware circuitry and software. Additionally, or alternatively, data storage may be stored and accessed from remote location 431 via network 450.

[0032] The computing system 410 may include at least one computer readable storage medium or memory, such as local storage device 422, for holding instructions programmed according to embodiments of the disclosure and for containing data structures, tables, records, or other data described herein. The term “computer readable storage medium” as used herein refers to any medium that participates in providinginstructions to the processor 415 for execution. A computer readable storage medium may take many forms including, but not limited to, non-transitory, non-volatile media, volatile media, and transmission media. Non-limiting examples of non-volatile media include optical disks, solid state drives, magnetic disks, and magneto-optical disks, such as magnetic hard disk or removable media drive. Non-limiting examples of volatile media include dynamic memory, such as system memory 416. Non-limiting examples of transmission media include coaxial cables, copper wire, and fiber optics. Transmission media may also take the form of acoustic or light waves, such as those generated during radio wave and infrared data communications. Computer readable program instructions described herein can be downloaded to respective computing / processing devices from a computer readable storage medium or to an external computer or external storage device via a network, for example, the Internet, a local area network, a wide area network and / or a wireless network.

[0033] Network 450 may be any network or system generally known in the art, including the Internet, an intranet, a local area network (LAN), a wide area network (WAN), a metropolitan area network (MAN), a direct connection or series of connections, a cellular telephone network, or any other network or medium capable of facilitating communication between computing system 410 and other computers such as remote computing device 441 . The network 450 may be wired, wireless or a combination thereof. Wired connections may be implemented using Ethernet, Universal Serial Bus (USB), RJ- 6, or any other wired connection generally known in the art. Wireless connections may be implemented using Wi-Fi, WiMAX, and Bluetooth, infrared, cellular networks, satellite or any other wireless connection methodology generally known in the art. Additionally,several networks may work alone or in communication with each other to facilitate communication in the network 450.

[0034] The embodiments of the present disclosure may be implemented with any combination of hardware and software. In addition, the embodiments of the present disclosure may be included in an article of manufacture (e.g., one or more computer program products) having, for example, a non-transitory computer-readable storage medium. The computer readable storage medium has embodied therein, for instance, computer readable program instructions for providing and facilitating the mechanisms of the embodiments of the present disclosure. The article of manufacture can be included as part of a computer system or sold separately.

[0035] Computer readable medium instructions for carrying out operations of the present disclosure may be assembler instructions, instruction-set-architecture (ISA) instructions, machine instructions, machine dependent instructions, microcode, firmware instructions, state-setting data, or either source code or object code written in any combination of one or more programming languages, including an object oriented programming language such as Smalltalk, C++ or the like, and conventional procedural programming languages, such as the "C" programming language or similar programming languages. The computer readable program instructions may execute entirely on the computing device, partly on the computing device, as a stand-alone software package, partly on the computing device and partly on a remote computer or entirely on the computing device or server. In the latter scenario, the remote computer may be connected to the computing device through any type of network, including a local area network (LAN) or a wide area network (WAN), or the connection may be made to an external computer(for example, through the Internet using an Internet Service Provider). In some embodiments, electronic circuitry including, for example, programmable logic circuitry, field-programmable gate arrays (FPGA), or programmable logic arrays (PLA) may execute the computer readable program instructions by utilizing state information of the computer readable program instructions to personalize the electronic circuitry, in order to perform aspects of the present disclosure.

[0036] Aspects of the present disclosure are described herein with reference to flowchart illustrations and / or block diagrams of methods, apparatus (systems), and computer program products according to embodiments of the disclosure. It will be understood that each block of the flowchart illustrations and / or block diagrams, and combinations of blocks in the flowchart illustrations and / or block diagrams, may be implemented by computer readable medium instructions.

[0037] The program modules, applications, computer-executable instructions, code, or the like depicted in FIG. 4 as being stored in the system memory 416 are merely illustrative and not exhaustive and that processing described as being supported by any particular module may alternatively be distributed across multiple modules or performed by a different module. In addition, various program module(s), script(s), plug-in(s), Application Programming Interface(s) (API(s)), or any other suitable computer-executable code hosted locally on the computing system 410, and / or hosted on other computing device(s) accessible via one or more of network, may be provided to support functionality provided by the program modules, applications, or computer-executable code and / or additional or alternate functionality. Further, functionality may be modularized differently such that processing described as being supported collectively by the collection ofprogram modules 411 , 413 may be performed by a fewer or greater number of modules, or functionality described as being supported by any particular module may be supported, at least in part, by another module. In addition, program modules that support the functionality described herein may form part of one or more applications executable across any number of systems or devices in accordance with any suitable computing model such as, for example, a client-server model, a peer-to-peer model, and so forth. In addition, any of the functionality described as being supported by any of the program modules depicted in FIG. 4 may be implemented, at least partially, in hardware and / or firmware across any number of devices.

[0038] It should further be appreciated that the computing system 410 may include alternate and / or additional hardware, software, or firmware components beyond those described or depicted without departing from the scope of the disclosure. More particularly, it should be appreciated that software, firmware, or hardware components depicted as forming part of the computing system 410 are merely illustrative and that some components may not be present or additional components may be provided in various embodiments. While various illustrative program modules have been depicted and described as software modules stored in system memory 416, it should be appreciated that functionality described as being supported by the program modules may be enabled by any combination of hardware, software, and / or firmware. It should further be appreciated that each of the above-mentioned modules may, in various embodiments, represent a logical partitioning of supported functionality. This logical partitioning is depicted for ease of explanation of the functionality and may not be representative of the structure of software, hardware, and / or firmware for implementing the functionality.Accordingly, it should be appreciated that functionality described as being provided by a particular module may, in various embodiments, be provided at least in part by one or more other modules. Further, one or more depicted modules may not be present in certain embodiments, while in other embodiments, additional modules not depicted may be present and may support at least a portion of the described functionality and / or additional functionality. Moreover, while certain modules may be depicted and described as submodules of another module, in certain embodiments, such modules may be provided as independent modules or as sub-modules of other modules.

[0039] Although specific embodiments of the disclosure have been described, one of ordinary skill in the art will recognize that numerous other modifications and alternative embodiments are within the scope of the disclosure. For example, any of the functionality and / or processing capabilities described with respect to a particular device or component may be performed by any other device or component. Further, while various illustrative implementations and architectures have been described in accordance with embodiments of the disclosure, one of ordinary skill in the art will appreciate that numerous other modifications to the illustrative implementations and architectures described herein are also within the scope of this disclosure. In addition, it should be appreciated that any operation, element, component, data, or the like described herein as being based on another operation, element, component, data, or the like can be additionally based on one or more other operations, elements, components, data, or the like. Accordingly, the phrase “based on,” or variants thereof, should be interpreted as “based at least in part on.”

[0040] The flowchart and block diagrams in the Figures illustrate the architecture, functionality, and operation of possible implementations of systems, methods, and computer program products according to various embodiments of the present disclosure. In this regard, each block in the flowchart or block diagrams may represent a module, segment, or portion of instructions, which comprises one or more executable instructions for implementing the specified logical function(s). In some alternative implementations, the functions noted in the block may occur out of the order noted in the Figures. For example, two blocks shown in succession may, in fact, be executed substantially concurrently, or the blocks may sometimes be executed in the reverse order, depending upon the functionality involved. It will also be noted that each block of the block diagrams and / or flowchart illustration, and combinations of blocks in the block diagrams and / or flowchart illustration, can be implemented by special purpose hardware-based systems that perform the specified functions or acts or carry out combinations of special purpose hardware and computer instructions.

Claims

CLAIMSWhat is claimed is:

1. A computer-implemented system for rendering scalable vector icons used in a computer application, the system comprising: a processor; and memory having modules stored thereon with instructions to be executed by the processor, the modules comprising: an icon engine configured to execute the following steps at the time of rendering the icon on a display: retrieve a single icon file from a library, wherein the icon file includes graphic information for a plurality of defined icon sizes and color themes, wherein graphic information for icon elements is defined using vectors for each of a plurality of icon sizes with unique elements assigned to a respective size layer, wherein graphic information pertaining to color theme is stored as a style sheet; identify icon modes of an active computer application, wherein the icon modes include size mode and color theme mode; select a layer activation for features assigned to a size mode for the icon based on the identified icon mode; select a color theme for the icon based on the identified color theme mode; and configuring the icon data based on the selected layer activation and color theme; and a rendering engine configured to receive the configured icon data and to render the icon on a computer display according to the layer activation and selected color theme.

2. The system of claim 1 , wherein the icon engine is further configured to: defeature one or more graphic elements for a small size icon by defining the layer associated with the small size to omit defeatured graphic elements that are present in the layer associated with the large size.

3. The system of claim 1 , wherein the icon engine is further configured with an interface platform for a user to define each scalable vector icon data file with some common features and some unique features for two or more defined sizes.

4. The system of claim 1 , wherein the layer activation is implemented by removing a layer that is not selected for activation.

5. The system of claim 1 , wherein the layer activation is implemented with a first layer as a background layer and a second layer is defined to have unique features on top of the background layer.

6. The system of claim 1 , wherein the style sheet is defined by a vector of name and color, wherein the vector pairs a color code to each of one or more line elements and fill elements of the icon.

7. The system of claim 1 , wherein the icon engine is further configured to identify an icon mode for icon activity, including an enabled and a disabled mode, wherein elements of the icon are defined for disabled mode to have a lighter shade for rendering lines and fills than for enabled mode.

8. The system of claim 1 , wherein the icon engine is further configured to: define an icon canvas grid having an origin at one corner, and a grid size ofNxN pixels, wherein N is evenly divisible by common icon sizes; define grid cell size of nxn pixels;define an offset for the icon outline origin with respect to the defined grid origin; defining a stroke width for line elements of the icon to be 2 pixels for a large size icon and 1 pixel for a small size icon; and selects locations for line elements to correspond with the defined grid, ensuring that line elements are drawn on the grid precisely aligned with pixel boundaries.

9. A computer-implemented method for rendering scalable vector icons used in a computer application, the method comprising: retrieving a single icon file from a library, wherein the icon file includes graphic information for a plurality of defined icon sizes and color themes, wherein graphic information for icon elements is defined using vectors for each of a plurality of icon sizes with unique elements assigned to a respective size layer, wherein graphic information pertaining to color theme is stored as a style sheet; identifying icon modes of an active computer application, wherein the icon modes include size mode and color theme mode; selecting a layer activation for features assigned to a size mode for the icon based on the identified icon mode; selecting a color theme for the icon based on the identified color theme mode; configuring the icon data file based on the selected layer activation and color theme; and rendering the icon on a computer display according to the layer activation and selected color theme of the configured icon data file.

10. The method of claim 9, further comprising: defeaturing one or more graphic elements for a small size icon by defining the layer associated with the small size to omit defeatured graphic elements that are present in the layer associated with the large size.11 . The method of claim 9, further comprising: providing an interface platform for a user to define each scalable vector icon data file with some common features and some unique features for two or more defined sizes.

12. The method of claim 9, wherein the layer activation is implemented by removing a layer that is not selected for activation.

13. The method of claim 9, wherein the layer activation is implemented with a first layer as a background layer and a second layer is defined to have unique features on top of the background layer.

14. The method of claim 9, wherein the style sheet is defined by a vector of name and color, wherein the vector pairs a color code to each of one or more line elements and fill elements of the icon.

15. The method of claim 9, further comprising: identifying an icon mode for icon activity, including an enabled and a disabled mode, wherein elements of the icon are defined for disabled mode to have a lighter shade for rendering lines and fills than for enabled mode.

16. The method of claim 9, further comprising: defining an icon canvas grid having an origin at one corner, and a grid size of NxN pixels, wherein N is evenly divisible by common icon sizes; defining grid cell size of nxn pixels;defining an offset for the icon outline origin with respect to the defined grid origin; defining a stroke width for line elements of the icon to be 2 pixels for a large size icon and 1 pixel for a small size icon; and selecting locations for line elements to correspond with the defined grid, ensuring that line elements are drawn on the grid precisely aligned with pixel boundaries.

Images