System and method for recoloring vector graphics

Abstract

This paper describes a computer-implemented method for recoloring vector graphics. A primary color defined by the vector graphics is determined, and a set of file color groups is generated by associating file colors with the primary color defined by the vector graphics. Input data defining a specific file color group and a color change for the new color is received, and a color transformation is determined in response. The corresponding transformed file color is then calculated using the color transformation.

Description

Technical Field

[0001] This disclosure relates to systems and methods for recoloring vector graphics. Background Technology

[0002] There are various computer-implemented tools available for creating and publishing designs or other visual content. Many of these tools use vector graphics.

[0003] Once a vector graphic is created or added to a design, users will often want to recolor the graphic.

[0004] In some cases, recoloring is a relatively simple task. For example, consider a simple rectangular line drawing. In this case, recoloring might only involve changing a single existing line color (e.g., black) to a single new line color (e.g., red).

[0005] However, in many cases, recoloring is much more complex—for example, recoloring a graphic with hundreds (or even more) colors.

[0006] The background information described in this specification is background information known to the inventors. The use of this information as background information does not constitute an admission or implication that this background information is prior art or common knowledge to those skilled in the art. Summary of the Invention

[0007] This document describes a computer-implemented method for recoloring vector graphics, the method comprising: processing the vector graphics by a processing unit to determine a set of file colors, each file color in the set being a color defined by the vector graphics; processing the vector graphics to determine a plurality of primary colors defined by the vector graphics; generating a set of file color groups by associating each file color in the set of file colors with a set of file color groups, each file color group being associated with a primary color defined by the vector graphics; receiving color change input data defining a specific set of file color groups and new colors via an input device; and in response to receiving the color change input data: determining a color transformation describing the change to the new color; calculating a corresponding transformed file color using the color transformation for each file color associated with the specific set of file color groups; recoloring the vector graphics by replacing each file color associated with the specific set of file color groups with its corresponding transformed file color; and displaying the recoloring vector graphics on a display.

[0008] This document also describes a computer processing system, comprising: a processing unit; an input device; a display; and a non-transitory computer-readable storage medium storing instructions, which, when executed by the processing unit, cause the processing unit to: process a vector graphic to determine a set of file colors, each file color in the set being a color defined by the vector graphic; process the vector graphic to determine a plurality of primary colors defined by the vector graphic; generate a set of file color groups by associating each file color in the set of file colors with a set of file colors, each file color group being associated with a primary color defined by the vector graphic; receive color change input data defining a specific set of file colors and a new color via the input device; and in response to receiving the color change input data: determine a color transformation describing the change to the new color; calculate a corresponding transformed file color using the color transformation for each file color associated with the specific set of file colors; recolor the vector graphic by replacing each file color associated with the specific set of file colors with its corresponding transformed file color; and display the recolornated vector graphic on the display. Attached Figure Description

[0009] In the attached diagram:

[0010] Figure 1 This is a block diagram illustrating an example environment in which the features of this disclosure can be implemented.

[0011] Figure 2 It is an example computer processing system that can be configured to perform the various features described herein.

[0012] Figure 3 A sample user interface is provided.

[0013] Figure 4 Components that depict vector graphic design elements.

[0014] Figure 5 It is a flowchart depicting the operations involved in the recoloring process of vector graphics.

[0015] Figure 6 It is a flowchart depicting the operations involved in extracting colors from vector graphics files.

[0016] Figure 7 It is a flowchart depicting the operations involved in determining the primary color in a vector graphic.

[0017] Figure 8 It is a flowchart depicting the operations involved in adjusting the colors of vector graphics.

[0018] Figure 9 It provides a visual depiction of recoloring vector graphics.

[0019] While the claimed invention may be modified and alternatively implemented in various ways, specific embodiments are shown by way of example and described in detail in the accompanying drawings. However, it should be understood that the drawings and detailed description are not intended to limit the invention to the specific forms disclosed. The intention is to cover all modifications, equivalents, and alternatives falling within the spirit and scope of the invention as defined by the appended claims. Detailed Implementation

[0020] In the following description, numerous specific details are set forth to provide a thorough understanding of the claimed invention. However, it will be apparent that the claimed invention can be practiced without these specific details. In some cases, well-known structures and devices are shown in block diagram form to avoid unnecessary ambiguity.

[0021] As mentioned above, many tools used for creating and publishing visual content utilize images in vector graphics format (vector graphics for short). This disclosure provides systems and methods for recoloring vector graphics.

[0022] An example of a vector graphics format is the Scalable Vector Graphics (SVG) format developed by the World Wide Web Consortium. Examples of the SVG format are provided to illustrate the techniques and operations of this disclosure. However, the features of this disclosure can be used (or are suitable for use together) with alternative vector graphics formats (such as EPS, PDF, AI, or other vector graphics formats) and / or raster images (by accessing their associated color tables). The features of this disclosure can also be used (or are suitable for use together) with multiple images—for example, across a corpus of images that constitute a brand identity or are otherwise related.

[0023] First, a networked environment and computer processing system that can implement the features of this disclosure will be described. Following this, an example of a user interface for creating a design with one or more vector graphics and recoloring such vector graphics will be described. Then, the process performed for recoloring a given vector graphic will be described.

[0024] For example, Figure 1 A networked environment 100 is described in which the various operations and techniques described herein can be performed.

[0025] The networked environment 100 includes a server system 102 and a client system 110 interconnected via a communication network 120 (e.g., the Internet). Although a single client system 110 is illustrated and described, the server system 102 will typically serve multiple client systems.

[0026] Server system 102 includes various functional components that work together to provide server-side functionality.

[0027] One component of server system 102 is front-end server application 104. Server application 104 is executed by a computer processing system to configure server system 102 to provide server-side functionality to one or more corresponding client applications (e.g., client application 112, described below). Server-side functionality includes features such as user account management, login, and content creation—e.g., creating, saving, publishing, and sharing content.

[0028] To provide server-side functionality, server application 104 includes one or more applications, libraries, APIs, or other software elements. For example, if client application 112 is a web browser, server application 104 will be a web server or alternative web server such as Apache, IIS, nginx, or GWS. If client application 112 is a specific application, server application 104 will be an application server specifically configured to interact with that client application 112. Server system 102 may have both web server and application server modules.

[0029] In this example, server system 102 also includes data storage 106 for storing various data required by server system 102 during its operation. Such data may include, for example, user account data, design template data, design element data, and data about designs already created by the user. Although a data storage 106 is depicted, server system 102 may include / utilize multiple separate data storages—for example, a user data store (storing user account details); one or more design element library data stores (storing design elements, such as graphics that a user can add to a design being created); a template data store (storing templates that a user can use to create designs); a design data store (storing data about created designs); and / or other data stores.

[0030] To provide server-side functionality to clients, server system 102 will typically include additional functional components to those illustrated and described. As an example, server system 102 will typically include one or more firewalls (and / or other network security components) and a load balancer (for managing access to server application 104).

[0031] Server system component 102 has been described as a functional component and can be implemented by hardware, software (data and computer-readable instructions stored in memory and executed by one or more computer processing systems) and / or a combination of hardware and software.

[0032] The exact hardware architecture of server system 102 will vary depending on the implementation, but it can well include multiple computer processing systems (e.g., server computers) that communicate with each other directly or via one or more networks (e.g., one or more LANs, WANs, or other networks (with security logical overlays, such as VPNs, if needed)).

[0033] For example, server application 104 may run on a single dedicated server computer, and data storage 106 may run on a separate server computer (with access to the appropriate data storage resources). As an alternative example, server system 102 may be a cloud computing system and configured to enable / disable resources based on user demand 104. In this case, multiple server computers (nodes) may run multiple server applications 104, which serve clients through a load balancer.

[0034] A single server system 102 has been shown in example environment 100. In some embodiments, additional server systems may be accessible to client system 110 (and / or server system 102)—for example, client and server systems may access third-party content servers to obtain content items such as vector graphics.

[0035] Client system 110 hosts client application 112, which, when executed by client system 110, configures client system 110 to provide client functionality for / interact with server application 104 of server system 102. Through client application 112, users can interact with server application 104 to perform various operations, such as creating, editing, saving, retrieving / accessing, publishing, and sharing designs.

[0036] Client application 112 may be a web browser application (such as Chrome, Safari, Internet Explorer, Opera, or an alternative web browser application) that accesses server application 104 via an appropriate Uniform Resource Locator (URL) and communicates with server application 104 via common World Wide Web protocols (such as http, https, ftp). Alternatively, client application 112 may be a specific application programmed to communicate with server application 104 using defined application programming interface (API) calls.

[0037] In this example, the client system 110 also includes a vector graphics recoloring component 114 (RC 114 for short). In the embodiments described below, the vector graphics recoloring component 114 performs (or configures the client application 112 to perform) the processing associated with vector graphics recoloring.

[0038] RC 114 may be a software module, such as an add-on or plug-in that operates in conjunction with client application 112 to extend its functionality. In an alternative embodiment, the functionality provided by RC 114 may be provided natively by client application 112 (i.e., client application 112 itself has instructions and data that, when executed, cause client application 112 to perform some or all of the vector graphics recoloring functionality described herein). In yet another alternative embodiment, RC 114 may be a standalone application that communicates with client application 112.

[0039] As a concrete example, the functionality of RC 114 can be provided by JavaScript running on web browser client application 112.

[0040] Client system 110 can be any computer processing system configured (or configurable) by hardware and / or software to provide client-side functionality. For example, client system 110 can be a desktop computer, laptop computer, netbook computer, tablet computing device, mobile / smartphone device, personal digital assistant, or alternative computer processing system.

[0041] Although Figure 1 As not shown, the client system 110 will typically have additional applications installed thereon, such as at least one operating system application, such as Microsoft Windows, Apple macOS, Apple iOS, Android, Unix or Linux, or alternative operating systems.

[0042] The above description and in Figure 1 The architecture illustrated in the diagram is provided as an example only. Many variations are possible.

[0043] For example, although RC 114 has been described and illustrated as part of / installed at client system 110, the functionality provided by RC 114 may alternatively be provided by server system 102 (e.g., as an addition or extension to server application 104, a separate, independent application communicating with server application 104, or a native part of server application 104).

[0044] As a further alternative, the functionality provided by RC 114 can be performed by a client application (e.g., 112) and a server application (e.g., 104) operating in combination.

[0045] As another alternative, RC 114 can be provided as a completely standalone service—for example, running on a server system separate from server system 102 and communicating with client application 112 (and / or server system 102) as needed to perform the vector recoloring functions described herein.

[0046] Furthermore, although the client-server architecture has been described, a content creation system including RC 114 (or otherwise configured to perform vector recoloring) can be provided in a standalone application that is installed and run only on the client system without any server application.

[0047] The features and techniques described in this article are implemented using one or more computer processing systems.

[0048] For example, in the networked environment 100 described above, the client system 110 is a computer processing system (e.g., a personal computer, tablet / telephone device, or other computer processing system). Similarly, the various functional components of the server system 102 are implemented using one or more computer processing systems (e.g., a server computer or other computer processing system).

[0049] Figure 2 A block diagram of a computer processing system 200 configurable to implement the embodiments and / or features described herein is provided. System 200 is a general-purpose computer processing system. It is understood that... Figure 2 Not all functional or physical components of the computer processing system are illustrated. For example, a power supply or power interface is not depicted, but system 200 will carry a power supply or be configured to connect to a power supply (or both). It will also be understood that a particular type of computer processing system will determine appropriate hardware and architecture, and alternative computer processing systems suitable for implementing the features of this disclosure may have additional, alternative, or fewer components than those depicted.

[0050] Computer processing system 200 includes at least one processing unit 202. Processing unit 202 may be a single computer processing device (e.g., a central processing unit, graphics processing unit, or other computing device), or it may include multiple computer processing devices. In some cases, where computer processing system 200 is described as performing an operation or function, all processing required to perform that operation or function will be performed by processing unit 202. In other cases, the processing required to perform that operation or function may also be performed by a remote processing device that is accessible and usable by system 200 (in a shared or dedicated manner).

[0051] Through communication bus 204, processing unit 202 communicates with one or more machine-readable storage (memory) devices that store instructions and / or data for controlling the operation of processing system 200. In this example, system 200 includes system memory 206 (e.g., BIOS), volatile memory 208 (e.g., random access memory, such as one or more DRAM modules), and non-volatile memory 210 (e.g., one or more hard disks or solid-state drives).

[0052] System 200 also includes one or more interfaces, generally indicated by 212, through which system 200 interfaces with various devices and / or networks. Generally, other devices may be integrated with system 200 or may be separate. In the case of devices being separate from system 200, the connection between the devices and system 200 can be via wired or wireless hardware and communication protocols, and can be direct or indirect (e.g., networking).

[0053] Wired connections to other devices / networks can be made using any suitable standard or proprietary hardware and connectivity protocol. For example, System 200 can be configured to make wired connections to other devices / communication networks via one or more of the following: USB; FireWire; eSATA; Thunderbolt; Ethernet; OS / 2; Parallel; Serial; HDMI; DVI; VGA; SCSI; Audio port. Other wired connections are also possible.

[0054] Wireless connectivity with other devices / networks can be achieved similarly through any suitable standard or proprietary hardware and communication protocols. For example, System 200 can be configured to wirelessly connect with other devices / communication networks using one or more of the following methods: infrared; Bluetooth; Wi-Fi; Near Field Communication (NFC); ​​Global System for Mobile Communications (GSM), Enhanced Data GSM Environment (EDGE), Long Term Evolution (LTE), Wideband Code Division Multiple Access (W-CDMA), and Code Division Multiple Access (CDMA). Other wireless connections are also possible.

[0055] Generally, and depending on the specific system discussed, devices connected to system 200 via wired or wireless means include one or more input devices to allow data to be input into / received by system 200 for processing by processing unit 202, and one or more output devices to allow system 200 to output data. In this example, the input / output devices interface with system 200 via one or more input / output device interfaces 214. Example devices are described below; however, it should be understood that not all computer processing systems will include all the devices mentioned, and additional and alternative devices to those mentioned can be used effectively.

[0056] For example, system 200 may include or be connected to one or more input devices through which information / data is input to (received by) system 200. Such input devices may include a keyboard, mouse, touchpad, microphone, accelerometer, proximity sensor, GPS device, etc. System 200 may also include or be connected to one or more output devices controlled by system 200 to output information. Such output devices may include devices such as CRT monitors, LCD monitors, LED monitors, plasma displays, touch screen displays, speakers, vibration modules, LEDs / other lights, etc. System 200 may also include or be connected to devices that can act as both input and output devices, such as storage devices from which system 200 can read data and / or write data (hard disk drives, solid-state drives, disk drives, compact flash cards, SD cards, etc.), and touch screen displays that can both display (output) data and receive touch signals (input).

[0057] As an example, if system 200 is a client system (e.g., client system 110), it may include a display 218 (which may be a touch screen display), a camera device 220, a microphone device 222 (which may be integrated with the camera device), a pointing device 224 (e.g., a mouse, touchpad or other pointing device), a keyboard 226, and a speaker device 228.

[0058] System 200 also includes one or more communication interfaces 216 for communicating with a network, such as network 120 of environment 100 (and / or a local network within server system 102 or OS 120). Through the communication interfaces 216, system 200 can transmit data to and receive data from networked devices, which themselves may be other computer processing systems.

[0059] System 200 can be any suitable computer processing system, such as a server computer system, desktop computer, laptop computer, netbook computer, tablet computing device, mobile / smartphone, personal digital assistant, or alternative computer processing system.

[0060] System 200 stores or has access to computer application programs (also known as software or programs)—that is, computer-readable instructions and data—which, when executed by processing unit 202, configure system 200 to receive, process, and output data. The instructions and data may be stored on a non-transitory machine-readable medium accessible to system 200. For example, instructions and data may be stored on non-transitory memory 210. Instructions and data may be transmitted to / received by system 200 via data signals through a transmission channel enabled (for example) by a wired or wireless network connection via an interface such as 214 or 216.

[0061] Applications accessible to System 200 typically include operating system applications such as Microsoft Windows, Apple macOS, Apple iOS, Android, Unix, or Linux.

[0062] System 200 also stores or accesses applications that, when executed by processing unit 202, configure system 200 to perform various computer-implemented processing operations described herein. For example, and referring to the above... Figure 1 Network environment: Client system 110 includes client application 112, which configures client system 110 to perform the operations described herein.

[0063] In some cases, the computer-implemented methods, in whole or in part, will be performed by the system 200 itself, while in other cases, the processing may be performed by other devices that communicate with the system 200 via data.

[0064] As stated above, this disclosure generally relates to recoloring vector graphics. (See references) Figure 3 An example user interface 300 will be described, through which a user can create designs, add design elements (such as vector graphics) to the designs, and recolor design elements. However, it should be noted that the specific ways of creating designs and / or adding vector graphics to designs are not specifically relevant to this disclosure, and there are many alternative ways of doing so.

[0065] In this example, the user interface 300 is displayed by the client system 102, for example, on the monitor 218, and the client system 102 is configured to do so by the client application 104.

[0066] Through interface 300, users can create design documents comprising one or more pages and, in particular, add design elements to the pages. The example design creation interface 300 includes a design creation pane 302 that displays the design currently being worked on. In this example, the design creation pane 302 displays a single page 304 of the design document.

[0067] The design creation interface 300 also includes a design element search and selection pane 310, through which users can search or browse one or more design element libraries, view design element previews 314, and select design elements to include in the design document. To this end, pane 310 includes a search box 312 (allowing the user to enter search text in this case) and design element previews 314 that provide preview images of the design elements. The search function allows client application 112 to search for design elements in the local memory of client system 110, in the memory of server system 120, and / or in a third-party server system (not shown).

[0068] The design elements previewed in the search and selection pane 310 can include vector graphic design elements and can be added to the design being worked on (e.g., to page 304), for example, by dragging and dropping, double-clicking, hovering, or any other appropriate user interaction.

[0069] The design creation interface 300 also includes a toolbar 320, which provides various tools for design creation and editing. In this particular example, the tools include: a design element selection tool 322, which allows the user to select specific design elements that have been added to page 304; a drawing tool 324, which allows the user to draw design elements with geometric or other shapes (some of these design elements are saved in vector graphics format); a text tool 326, which allows the user to add text design elements; and an import tool 328, which allows the user to import design elements from another source (e.g., design elements stored on local or remotely accessible storage, design elements from a third-party server, etc.).

[0070] Although not shown, toolbar 320 is typically an adaptive toolbar because the tools provided change depending on what the user is doing. For example, if the user selects text tool 326, additional (or alternative) text-related tools may be displayed, such as font selection and text size tools.

[0071] In this example, toolbar 320 also includes a design element recoloring control 330, the activation of which triggers the design element recoloring process as described below.

[0072] Generally, to create a design, a user creates a page and adds design elements to that page. Design elements can be added in several ways. For example, a user can interact with the design element search and selection pane 310 to search for / browse design elements and then add them to the design being created—for example, by selecting the design element preview 314, dragging it to a position on page 304, and placing it. Alternatively, a user can create and add entirely new design elements—for example, by drawing the design elements using tools such as the drawing tool 324 or adding custom text using the text tool 326. Furthermore, alternatively, users can import design elements using the import tool 328.

[0073] In this particular example, page 304 comprises a single design element 340. Example design element 340 is a vector graphic design element. Due to the limitations of black and white images, the following reference... Figure 4 Further description of design element 340.

[0074] The interface 300 in this example also includes a color palette menu 350, which includes multiple (five in this case) color buttons 352A-352E. The display of the color palette menu 350 may be, for example: permanent; opened and closed via a control (such as a menu or other control); displayed in response to the selection of a specific element in an element group; displayed in response to the activation of the recoloring control 330; or displayed in response to an alternative event (user- or program-driven).

[0075] The appearance of the color buttons 352A-352E can change according to the context. For example, if no specific design element is selected, the client application 112 can be configured to display each color button 352 as: a specific color already used in the displayed page; a specific color used in the design to which the currently displayed page belongs; a color recently used / selected by the user; or a color available to the user.

[0076] As described below, in some embodiments, with a specific design element already selected, the client application 112 is configured to display each color button 352 as a color used in or representing a set of colors used in the selected design element. In this particular example, using five color buttons 352, a maximum of five colors can be displayed at any given time. While the client application 112 can be configured to display more (or fewer) color buttons, the number of buttons that can be displayed will be practically limited due to available screen space or human cognitive factors.

[0077] Interface 300 is provided as an example only, and alternative user interfaces (with alternative user interface elements and controls) are possible.

[0078] As stated above, this disclosure will provide examples of vector graphics using the SVG format. Information about the SVG format can be found in the Scalable Vector Graphics Specification published by the World Wide Web Consortium.

[0079] However, generally speaking, a given SVG is stored in a file that includes (in particular) one or more elements. For clarity, the elements that make up an SVG will be referred to as SVG elements. This contrasts with the elements contained within a design / design page, which will be referred to as design elements.

[0080] For example, design element 340 above is an SVG design element that includes multiple SVG elements. A simplified version of the SVG file for design element 340 (with specific path commands omitted) is as follows:

[0081]

[0082] Therefore, design element 340 is defined by nine paths and includes seven different colors (#E8D5EA, #C58EBF, #CFA4CC, #DDBDDC, #BB76B0, #97C6D5 and #7FB7C8).

[0083] To illustrate these paths / colors, Figure 4 A version of design element 340 is provided, but with a black outline indicating the path (the black outline is not actually defined by the SVG example above, but is added for illustrative purposes). Figure 4 middle). Figure 4 Each path is also shown separately. Specifically: the rabbit body 402 is color #E8D5EA; the rabbit nose 404 is color #C58EBF; the inside of the rabbit ears 406 is color #CFA4CC; the leg accent line 408 is color #DDBDDC; the eyes and whiskers 410 is color #BB76B0; the bow tie background 412 is color 97C6D5; and each of the three bow tie stripes 414 is color #7FB7C8.

[0084] The SVG standard defines various types of SVG elements. For example, these include shape elements that define specific shapes—such as rectangle elements, circle elements, ellipse elements, line elements, polyline elements, polygon elements, and path elements.

[0085] A given SVG shape element can define or reference one or more colors. For example, a shape element can directly define a fill color and / or a stroke color. Alternatively, a shape element can reference another SVG element that defines one or more colors (such as a style element or gradient element that defines a "stop" color). Further alternatively, colors can be inherited from a parent element or configured via CSS.

[0086] To provide a simple example, the following SVG is defined with a width of 200, a height of 200, and a single rectangle element. The rectangle element has a width of 100, a height of 100, a red fill (fill="rgb(255,0,0)"), and a blue line with a stroke width of 5 (stroke-width:5) (stroke="rgb(0,0,255)").

[0087]

[0088] As another example, the following SVG definition has the same rectangle as above but also includes a circular element to the right of that rectangle. The fill of the circular element references another defined element of the SVG (fill="url(#gradient1)"). In this case, the referenced element is a linear gradient, starting from red (…).<stop offset="0%"stop-color="red" / > Vertical transition to blue<stop offset="100%"stop-color="blue" / > ).

[0089]

[0090] The process involved in recoloring the selected vector graphic will now be described.

[0091] Certain operations are described as being performed by the Vector Graphics Recoloring Component (RC) 114. As described above, RC 114 can be installed on a server system (e.g., 102) or a client system (e.g., 110). Alternatively, the functionality provided by RC 114 can be provided by a server application (e.g., server application 104 running on server system 102), a client application (e.g., client application 112 running on client system 110), or a combination of applications running on the same or different systems.

[0092] Figure 5 This is a flowchart describing the operations involved in the vector graphics recoloring process 500.

[0093] At 502, a recoloring trigger event was detected.

[0094] In the client-server architecture where RC 114 runs on server system 102 (as referenced above) Figure 1 (As mentioned above), either the client application 112 or the server application 104 can detect the triggering event. If the client application 112 detects the triggering event, it will notify the server application 104 of the triggering event.

[0095] In a standalone implementation (e.g., where all processing is performed by a single computer, such as client system 110), the triggering event is detected by the client application.

[0096] In this embodiment, receiving user input (e.g., via touchscreen display 218 or other input device) at the client system 110 to activate a specific user interface control (e.g., the design element recoloring control 330 as described above) is a recoloring trigger event. Other trigger events are also possible, such as user input copying / pasting styles, user input invoking a color palette application, user input implementing "change all" colors, user input undoing or redoing a previous action, and / or other trigger events.

[0097] In this embodiment, the recoloring trigger event is related to a specific design element. As an example, a design element can be specified by the user selecting an element in the user interface 300 before activating the recoloring control 330 (e.g., by clicking it, touching it, or otherwise selecting it).

[0098] In 504 (by client application 112 or server application 104), it is determined whether a particular design element is a vector graphic.

[0099] If a particular design element is not a vector graphic (and is, for example, a bitmap), then the processing proceeds to step 526.

[0100] If a particular design element is a vector graphic, the processing (in this example) proceeds to step 508.

[0101] In 508, RC 114 processes vector graphics design elements (or, more specifically, the files that define the design elements) to determine the file's color set. Each file color in the file color set is a color defined in the vector graphics file.

[0102] RC 114 can be configured to determine the colors of a collection of vector graphics files in various ways. See below for reference. Figure 6 Describe an example implementation. The file color set can be recorded in any suitable manner, such as a list or array (or any other suitable data type / structure), where each element is a unique color defined by the vector graphics file. For example, for the SVG file containing squares and circles mentioned above, the file color set might look like this:

[0103] [rgb(255,0,0),rgb(0,0,255)]

[0104] It can be seen that although the SVG file defines the color rgb(255,0,0) twice (once as the stop color and once as the fill color), the color is only recorded once in the file's color set.

[0105] As a further example, for the 'rabbit' SVG file above, the file color set (in hexadecimal format) could be as follows:

[0106] [#E8D5EA, #C58EBF, #CFA4CC, #DDBDDC, #BB76B0, #97C6D5, #7FB7C8]

[0107] In some implementations, after determining the colors of the vector graphics file, RC 114 generates converted file color values ​​for use in downstream processing. Each converted file color value corresponds to an actual file color, but has been converted to a specific color model format. In this embodiment, RC 114 converts each file color to a CIE-L*ab value (LAB value for short). Various algorithms are known for converting a given color from one color model (e.g., RGB) to another color model (e.g., LAB). For example, the converted file colors corresponding to the aforementioned SVG files (including squares and circles) could (depending on the conversion algorithm used) be as follows:

[0108] [LAB(54.2917,80.8125,69.8851),LAB(29.5676,68.2986,-112.0294)]

[0109] In some implementations, RC 114 determines all colors defined in the vector graphics file at point 508. In alternative implementations, RC 114 determines only a subset of the colors defined in the file—for example, only the fill color (instead of the line / stroke color). In such implementations, recoloring is limited to the subset of file colors determined at point 508.

[0110] In this embodiment, 510, RC 114 determines whether the design element is a color composite vector graphic. This determination is made to forgo the more intensive processing described below without guaranteeing or requiring it.

[0111] In some implementations, RC 114 determines whether a design element is a color-complex vector graphic by determining whether the design element defines at least a threshold number of colors—for example, whether the number of colors in a vector graphic file determined in 508 is greater than or equal to the threshold number of colors n (e.g., n = 5).

[0112] If RC 114 determines that the design element is not a complex colored vector graphic, then the process proceeds to 526.

[0113] If RC 114 determines that the design element is a color composite vector graphic, then the processing proceeds to step 512.

[0114] At 512, RC 114 determines the number (k) of primary colors present in vector graphic design elements. See below for reference. Figure 7 The description describes the processing of design elements to determine the primary colors. In this example, the processing generates a primary color data structure (e.g., a list) with k primary colors for the vector graphics being processed.

[0115] At 514, RC 114 generates a set of file color groups. This involves associating each (or at least some) vector graphics file color (determined at 508) with one of the primary colors (determined at 512).

[0116] Associating a given vector graphics file color with a specific primary color can be done in various ways, depending on the color space used. As an example of the LAB or RGB color space, RC 114 calculates the distance (e.g., Euclidean distance) between a given color and each primary color. RS 114 then associates the given color with its nearest primary color. If a given color is equidistant from two or more primary colors, it can be associated with any of those primary colors.

[0117] In some implementations, a given file color is excluded from recoloring if the distance between it and its nearest primary color exceeds a distance threshold (e.g., by removing it from the file color list generated at position 508 or otherwise marking the color). Any color excluded from recoloring retains its original color in any downstream recoloring process. The distance threshold can be set in several ways when applied. For example, the threshold distance can be determined based on a statistical analysis of the distances of all file colors to their nearest primary color, such as by setting the threshold distance to a value equal to two standard deviations of the distance from the average file color to the nearest primary color. Alternatively, the threshold distance can be manually configured by the user.

[0118] RC 114 stores the file color groups created at position 514 in a file color group data structure, where each record associates a specific file color with a specific group identifier. The group identifier can be a value used to generate the group's primary color. For example, the file color group data structure could be a table structure like the one below (for convenience of using RGB values, but note that LAB values ​​are used in some implementations):

[0119] File color Group identifier 255,255,255 255,255,255 255,255,254 255,255,255 255,254,255 255,255,255 254,255,255 255,255,255 0,125,15 0,125,0 1,120,15 0,125,0 … …

[0120] As can be seen, each file color is mapped to a single group identifier (in this case, the primary color value), but each group identifier can be associated with multiple file colors.

[0121] At 516, in this embodiment, RC 114 determines a representative color for each vector graphics file color group created at 514.

[0122] In some implementations, RC 114 is configured to determine the representative color of a given color group as the primary color for generating that group.

[0123] In an alternative implementation, RC 114 is configured to determine the representative color of a given color group by calculating a new color based on the file colors that are members of the color group. In this case, for example, RC 114 calculates the average color of all file colors that are members of a given group and uses that average as the representative color of the given group. When calculated in this way, the average color may be the same as, but may be different from, existing file colors (or primary colors).

[0124] When RC 114 calculates the average color of all files that are members of a group, it can be configured to do so based on a specific color space format (e.g., LAB values). In this case, if the file colors have not yet been converted to LAB values, this is done by RC 114 (as described above).

[0125] When calculating representative colors (instead of using primary colors), RC 114 can be configured to store them in a representative color data structure, for example (for easy reuse of RGB values):

[0126] Group identifier Representative colors 255,255,255 xxx,xxx,xxx 0,125,0 xxx,xxx,xxx

[0127] Alternative methods for associating color groups with their representative colors are possible.

[0128] At 518, RC 114 displays the representative color of the color group in the user interface (e.g., on display 218). In the case where RC 114 is implemented on the server side, this involves transmitting the representative color to the client application 112.

[0129] Various user interfaces can be generated to display representative colors; however, in this example, each representative color is displayed in the color button 352 of the palette menu 350. If the number of color groups (and therefore the number of their representative colors) is less or more than the number of color buttons 352, the client application 112 can be configured to display additional / fewer color buttons 352 in the user interface accordingly.

[0130] At 520, RC 114 receives color change data.

[0131] In this example, the color change data is generated based on user input of color changes made at client system 110 and received by client application 112. The color change data is passed to RC 114 (e.g., if RC 114 is implemented on the server side, it is passed to server application 104).

[0132] In this embodiment, the color change data includes a color group identifier indicating a specific color group to be changed and new color data indicating the new color of that specific color group.

[0133] A user interface and user input are available for selecting color groups and creating new colors for those groups.

[0134] For example, referring to the user interface 300 described above, a user can select a specific color group to change by selecting a specific button 352. According to 518, the specific button 352 will display the representative color of the specific color group—the specific color group that defines the color change data.

[0135] Selecting a specific button 352 can also cause a color selection interface to be displayed (if it is not already displayed), through which the user can select a new color (thus generating new color data). Any suitable color selection interface can be provided and used, such as: a color slider, providing a sliding control that the user can operate to select a color; a color wheel / palette / selector control, which the user can operate to select a specific color; a text input field (plain text, RGB values, or alternative color definitions) where colors can be entered; a color picker tool (such as an eyedropper tool) for selecting another color displayed on the user's screen; or any other color selection interface.

[0136] Typically, once a new color is selected, the color of the selected specific button will be changed. In some implementations, the button changes to the new selected color. In alternative implementations, the button's new color is calculated based on the average of the colors in the group after the recoloring (at position 522). This can be done in the same or a similar way as calculating the representative group color at position 516.

[0137] At position 522, in response to receiving color change data, RC 114 adjusts the color of the vector graphic in question. See below for reference. Figure 8 Describe the example color adjustment process.

[0138] At 524, RC 114 determines whether further color change data has been received. This could happen, for example, if the user selects a new color group to adjust (via the Alternate Color button 352) and adjusts that new representative color, or if the user makes further adjustments to the same color group. If further color change data is received, processing returns to 520 to recolor the vector graphic.

[0139] If no further color change data is received (e.g., the user closes the design in question, exits recoloring mode by selecting an alternative control, or does not input anything within the defined time period), the recoloring process 500 completes. In this case, the user can accept the color changes (in which case the recoloring vector graphics are saved) or reject them (in which case the changes are discarded).

[0140] At 526, RC 114 has determined that the design element is neither a vector graphic (at 502) nor a color-complex vector graphic (at 510). In either case, an alternative process (not described) is initiated. Depending on the implementation and how operation 526 is reached, the alternative process may simply generate a message indicating that the element is not a vector graphic and recoloring cannot be performed. Alternatively, client application 112 and / or server application 104 may be configured to perform an alternative recoloring process appropriate to the type of design element in question (e.g., a bitmap recoloring process) and / or the color complexity of the design element in question.

[0141] Although not described above, RC 114 can be configured to store various data generated for a given vector graphic (e.g., in data storage 106, where RC 114 operates on the local memory of the server-side and / or client system 110), so that this data does not need to be regenerated / recalculated in any downstream recoloring of the vector graphic in question. For example, a list (or other data structure) of file colors determined at 508, primary colors determined at 512, file color groups created at 514, and / or representative group colors determined at 516 can be persistently stored for future reference.

[0142] In process 500, recoloring is described as an end-to-end process performed in response to a specific triggering event. However, in an alternative embodiment, the processing involved in recoloring vector graphics can be broken down into a recoloring preparation operation and an actual recoloring operation.

[0143] For example, it should be understood that some or all of the following can be performed as recoloring preparation operations (and the data generated by them is stored): 508 (determine file colors), 512 (determine primary color), 514 (create file color group), and 516 (determine representative file group colors). Doing so can effectively prepare vector graphics for any downstream recoloring event.

[0144] If these operations are performed in advance, then when the user (manually or programmatically) selects to actually recolor the vector graphics, only the actual recoloring operation is required (522).

[0145] With this model, the relevant application (client application 112 or server application 104) can be configured to perform some or all of the preparation operations at any appropriate time: for example, when a vector graphic is added to a library, when a vector graphic is added to a design page, or at other times. The data generated by the preparation operations can then be stored in an appropriate data store and associated with the vector graphic for retrieval as needed.

[0146] At step 508 of process 500 above, RC 114 processes the vector graphics file to determine / generate the file color set. Figure 6 Example procedure 600 is provided for doing this.

[0147] At position 602, RC 114 retrieves the next unprocessed vector graphics element defined in the vector graphics file. RC114 can traverse the vector graphics elements in any order, as long as all elements have been processed.

[0148] At 604, RC 114 determines whether the current element defines one or more colors. If the current element defines one or more colors, processing proceeds to 606. Otherwise, processing proceeds to 614.

[0149] At position 606, RC 114 obtains the next unprocessed color in the current element. RC 114 can iterate over the colors defined by the element in any order, as long as all colors defined by the element have been processed.

[0150] At 608, RC 114 determines whether the current color has already been recorded (e.g., in a maintained set of file colors (or an alternative data structure)). If so, processing proceeds to 612.

[0151] If the current color is not yet recorded in the file color set, the process proceeds to 610. At 610, RC 114 adds the current color to the file color set. The process then proceeds to 612.

[0152] In some implementations, RC 114 is configured to add only certain types of file colors to the file color set—for example, all colors except line (stroke) colors. In such an implementation, an additional determination can be made at 608 to determine whether the current color is the type to be added to the set. If not, the color is ignored. If it is, and the color has not yet been added to the file color set, it is added.

[0153] At 612, RC 114 determines whether the current element defines one or more additional colors that have not yet been processed. If so, processing returns to 606 to process that color. If all colors defined by the current element have been processed, processing continues to 614.

[0154] At 614, RC determines if there are any unprocessed elements in the file. If so, processing returns to 602 to process the next element. If all elements have been processed, the generation of the file color set is complete.

[0155] An alternative processing method can be implemented to generate a set of colors for a file. As another example, RC 114 can be configured to iterate through a vector graphics file and initially add all colors defined by all elements to a set. After this, RC114 can process the set to remove any duplicate colors.

[0156] At step 512 of process 500 above, RC 114 processes the vector graphics to determine the primary color. Figure 7 Example procedure 700 is provided for doing this.

[0157] At 702, RC 114 rasterizes vector graphics to generate raster data that defines a raster version of the graphic.

[0158] Various color schemes can be used to determine the primary color (e.g., CIE, RGB, HSV, CMYK, or alternative color schemes). However, in this embodiment, the CIE-L*ab color model (LAB) is used. Therefore, the rasterization at 702 is configured to convert the rasterized pixels to the LAB color model for processing.

[0159] At 704, RC 114 uses a clustering algorithm on the raster data to calculate the number (k) of color clusters within the graphic—that is, clusters of similar color pixels.

[0160] Various algorithms can be used for this purpose, such as the k-means clustering algorithm.

[0161] At 706, RC 114 calculates the representative color for each cluster, which is calculated at 704. This can be performed for a given cluster, for example, by calculating the average color of all pixels assigned to that cluster.

[0162] Each representative color calculated at point 706 is recorded as the primary color of the vector graphic.

[0163] The number of color clusters k (and thus the number of primary colors) can be determined in various ways.

[0164] In some implementations, k can be a predefined value. For example, k can be set to the number of different color buttons 352 displayed in the color palette menu 350. In this case, if the user interface allows the user to increase or decrease the number of color buttons 352 (and the user does so), the value of k will change accordingly.

[0165] In an alternative implementation, k can be determined based on user input (or a default value if no user input is received). In such an embodiment, the result of the primary color determination (and / or overall recoloring process) can be presented to the user, who can then increase or decrease the number of clusters to provide different numbers of primary colors and different numbers of results.

[0166] In a further implementation, a clustering algorithm (and / or its parameters) that determines the number of clusters can be used—for example, mean-shift clustering.

[0167] At step 522 of process 500 above, RC 114 adjusts the colors of the vector graphics based on color change data. The color change data includes a color group identifier indicating the specific color group to be changed and new color data indicating the new color of that specific color group.

[0168] Turning Figure 8 This section describes procedure 800 for adjusting the colors of vector graphics. Procedure 800 assumes that all colors are represented in a common format (such as RGB, LAB, or an alternative format). If this is not the case, a conversion can be performed as needed.

[0169] In 802, RC 114 calculates a color transformation that maps the representative color of a particular color group (as identified by the color group identifier) ​​to a new color that has been selected for that group.

[0170] The calculation of color transformation will depend on the color space used. For example, in the LAB color model, this might involve calculating the exact change made to the representative color in 3D space and applying that change to all colors within the group. For instance, if the representative LAB color changes from [60,50,50] to [55,50,50], then the representative color that was originally [51,48,30] will change to [46,48,30].

[0171] At 804, RC 114 uses the color transformation determined at 802 to calculate the transformed file color corresponding to each original file color (as determined at 508) in the specific color group selected at 520 for recoloring.

[0172] Calculating the transformed file color corresponding to a given original file color can be done in various ways.

[0173] In some embodiments, RC 114 directly applies the color transformation determined at 802 to the original file colors in question.

[0174] If this results in a new color value within the color space being used, the result is recorded as the transformed file color corresponding to the original file color. However, if the transformation results in a new color value outside the color space being used—that is, reaching the gamut boundary—then the transformed file color will be recorded as the color at the gamut boundary.

[0175] A potential problem with this approach is that important color information can be lost during the transformation. For example, consider a shape with a color gradient that transitions from one color to another. If a stop color in the middle of the gradient reaches (or crosses) a gamut boundary, that stop color will be transformed into the gamut boundary color, and so will all subsequent stop colors in the gradient. In this case, the transformation will result in a portion of the original shape being a solid color instead of a smoothly transitioning gradient.

[0176] To address this issue, in an alternative implementation, RC 114 does not directly apply the color transformation determined at 802 to the original file colors. Instead, RC 114 calculates the transformed file colors such that they approximate the gamut boundary proportionally to their original distance from the boundary.

[0177] Once calculated, the transformed file colors can be stored in a transformed file color data structure, which includes a record for each original file color that associates the original file color with the transformed color. Any suitable data type or structure can be used, but as an example, the transformed file color data structure could be the following table:

[0178] Original file color Transformed file colors … …

[0179] In step 806, RC 114 generates recolored vector graphics files. To do this, RC 114 iterates through the original vector graphics files (or copies thereof) and replaces each original file color with its corresponding transformed file color.

[0180] This is considered at 806 if only a subset of the file colors are recolored. For example, if only the fill color is recolored (but not the line / stroke color), then only the fill color is replaced at 806.

[0181] At 808, RC 114 causes the recolored vector graphics file to be displayed by client application 112 (e.g., on monitor 218), in place of the original vector graphics file. When RC 114 performs operations on the server side, this involves transferring the recolored vector graphics file to client application 112 (via server application 104).

[0182] Alternatively, instead of RC 114 generating a recolored vector graphics file at 806, RC 114 can send the transformed file color data structure to client application 112, which can then generate the recolored vector graphics file itself.

[0183] In addition to transforming the individual file colors that are members of a specific group selected at 804, RC 114 can determine the representative color of the transformed color group. This can be done in several ways. For example, RC 114 can use the new color selected at 520 as the new representative color of the transformed color group. Alternatively, RC 114 can calculate the new representative color of the group based on the colors that are members of that color group (such as those transformed) (e.g., the average of the transformed group colors or an alternatively calculated color). Once the representative color of the transformed group has been calculated, RC 114 can display it (e.g., using the color button 352 selected to trigger recoloring).

[0184] Then process 800 is complete.

[0185] Refer to vector graphic design element 340 (the one above) Figure 4 (Description) to describe the example recoloring process.

[0186] Referring to the vector graphic design element 340 as described above, the file color identified at 508 (fill only in this case) can be represented in the file color table as follows (file color numbers are 1 to 7).

[0187]

[0188]

[0189] At position 512, two primary colors are identified; at position 514, each of the file colors is assigned to a group (Group A or Group B); and at position 516, the representative color for each group is determined. This is described in the table below:

[0190] refer to Original file color Color group Representative group colors 1 #E8D5EA A #CB8DBC 2 #C58EBF A #CB8DBC 3 #CFA4CC A #CB8DBC 4 #DDBDDC A #CB8DBC 5 #BB76B0 A #CB8DBC 6 #97C6D5 B … 7 #7FB7C8 B …

[0191] In this example, the original colors (references 1 to 5) have been assigned to group A, whose representative color has been calculated as #CB8DBC.

[0192] The representative colors of group A and group B can then be displayed at 518 (e.g., in color button 352 of palette menu 350).

[0193] At point 520, the user can then select the color button representing group A and, via the color change interface, change the color representing group A to a new color—in this case, color #495ECB. This results in a new color being calculated (at point 804) for each original file color in color group A (based on the "Recalculated File Colors" column). In this case, a new representative group color is also determined for group A, reflecting the color changes made for that group. For example:

[0194]

[0195] At position 806, a recolored vector graphics file is generated. In this case, a truncated version of the recolored SVG file (with specific path commands omitted) is as follows:

[0196]

[0197] As can be seen, when the recolored SVG file is compared with the original SVG file: the colors of the first five path elements (defined as colors in group A) have changed; the colors of the last four path elements (defined as colors in group B) have not changed. The result is that the color of the rabbit itself has changed, but the color of the rabbit's bow tie has not changed.

[0198] Figure 9 Illustrations of the original vector graphic 340 and a recolored version of that vector graphic 902 are provided (albeit in grayscale).

[0199] Various adjustments can be made to the above processing.

[0200] For example, in some implementations, RS 114 is configured to determine (e.g., at 512 after rasterizing the graphic) whether any particular color or color band—e.g., black or near black—has a percentage of pixels associated with it that is less than a defined threshold (e.g., if <n% of the graphic pixels belong to a particular color / color band—n being, for example, 5%). If so, those colors can be ignored when determining the dominant color and removed from further recoloring (e.g., by mapping the associated colors back to one or more file colors and removing that / those file colors from the list of file colors generated at 508).

[0201] As a further example, in some implementations, after determining the dominant color, RS 114 is configured to determine whether the percentage of pixels associated with any of the dominant colors is less than a defined threshold (e.g., 5%). If so, RS 114 recalculates the dominant color ignoring those pixels.

[0202] The recoloring process has been described above with respect to a single vector graphic. However, the processing can be performed (or is suitable for performing) on multiple vector graphics—e.g., a set of vector graphics. In such a case, the individual steps need to be adjusted. For example, at 508, the vector graphic file colors are determined for all vector graphics being processed (and all file colors from that point on are used for further processing).

[0203] The flowcharts shown in the figures and described above define operations in a particular order to explain various features. In some cases, the operations described and illustrated may be capable of being performed in a different order than shown / described, one or more operations may be combined into a single operation, a single operation may be divided into multiple separate operations, and / or the functionality implemented by one or more of the described / illustrated operations may be implemented by one or more alternative operations. Further still, the functionality / processing of a given flowchart operation may be performed by a different system or application.

[0204] Unless otherwise specified, the terms "comprising" and "including" (and their variants, such as "comprises", "includes", etc.) are used inclusively and are intended not to exclude further features, components, integers, steps, or elements.

[0205] It should be understood that the embodiments disclosed and defined in this specification extend to alternative combinations of two or more separate features mentioned or obvious from the text or drawings. All such different combinations constitute alternative embodiments of the present disclosure.

[0206] This specification describes various embodiments with reference to numerous specific details that may vary depending on the implementation. Any limitation, element, characteristic, feature, advantage, or attribute not expressly recited in the claims should not be considered as an essential or necessary feature. Therefore, the specification and drawings are to be considered illustrative rather than restrictive.

Claims

1. A computer-implemented method for recoloring vector graphics, the method comprising: The processing unit processes the vector graphics to determine a set of file colors, where each file color in the set is a color defined by the vector graphics. Processing the vector graphic to determine a plurality of primary colors defined by the vector graphic, wherein processing the vector graphic to determine the plurality of primary colors includes: The vector graphics are rasterized to generate raster data; The raster data is processed to determine multiple clusters; Calculate the representative cluster color for each cluster; and The color of each representative cluster is determined as the primary color; A set of file color groups is generated by associating each file color in the set of file colors with a file color group, each file color group being associated with a primary color defined by the vector graphics, wherein associating a given file color with a specific primary color includes: Calculate the distance between the given file color and each primary color; and Associate the given file color with the specific primary color that is closest to the given file color; Receive color change input data defining a specific file color group and a new color via an input device; and In response to receiving the color change input data: Determine the color transformation that describes the change to the new color; For each file color associated with the specific file color group, the corresponding transformed file color is calculated using the color transformation; The vector graphics are recolored by replacing each file color associated with the specific file color group with its corresponding transformed file color; and Display recolored vector graphics on the monitor.

2. The computer-implemented method according to claim 1, wherein, Calculating the representative cluster color of a given cluster involves calculating the average color of all pixels associated with the given cluster.

3. The computer-implemented method according to claim 1 further includes determining a representative group color for each file color group in the set of file color groups.

4. The computer-implemented method according to claim 3, wherein, The representative group color determined for a given file color group is the primary color associated with that file color group.

5. The computer-implemented method according to claim 3, wherein, Determining a representative group color for a given file color group includes calculating a new color based on the file colors that are members of the given color group.

6. The computer-implemented method according to claim 3, wherein, Determining the representative group color for a given file color group involves calculating the average color of all file colors associated with the given file color group.

7. The computer-implemented method according to claim 3, wherein, The color transformation describes the color change from a representative group color of the specific file color group to the new color.

8. The computer-implemented method of claim 3 further includes displaying a representative group color of at least one file color group in the user interface.

9. The computer-implemented method according to claim 3, wherein, In response to receiving the color change input data, the method further includes calculating a new representative group color for the specific file color group.

10. The computer-implemented method according to claim 9, wherein: Before receiving the color change input data, the method further includes displaying a representative group color of the specific file color group in the user interface; and After receiving the color change input data, the method further includes displaying a new representative group color of the specific file color group in the user interface.

11. A computer processing system, comprising: Processing unit; Input devices; monitor; as well as A non-transitory computer-readable storage medium that stores instructions, which, when executed by the processing unit, cause the processing unit to: The vector graphics are processed to determine a set of file colors, where each file color in the set is a color defined by the vector graphics; Processing the vector graphic to determine a plurality of primary colors defined by the vector graphic, wherein processing the vector graphic to determine the plurality of primary colors includes: The vector graphics are rasterized to generate raster data; The raster data is processed to determine multiple clusters; Calculate the representative cluster color for each cluster; and The color of each representative cluster is determined as the primary color; A set of file color groups is generated by associating each file color in the set of file colors with a file color group, each file color group being associated with a primary color defined by the vector graphics, wherein associating a given file color with a specific primary color includes: Calculate the distance between the given file color and each primary color; and Associate the given file color with the specific primary color that is closest to the given file color; The input device receives color change input data defining a specific file color group and a new color; and In response to receiving the color change input data: Determine the color transformation that describes the change to the new color; For each file color associated with the specific file color group, the corresponding transformed file color is calculated using the color transformation; The vector graphics are recolored by replacing each file color associated with the specific file color group with its corresponding transformed file color; and The recolored vector graphics are displayed on the monitor.

12. The computer processing system according to claim 11, wherein, Calculating the representative cluster color of a given cluster involves calculating the average color of all pixels associated with the given cluster.

13. The computer processing system according to claim 11, wherein, The execution of the instruction further enables the processing unit to determine a representative group color for each file color group in the set of file color groups.

14. The computer processing system according to claim 13, wherein, The representative group color determined for a given file color group is the primary color associated with that file color group.

15. The computer processing system according to claim 13, wherein, Determining a representative group color for a given file color group includes calculating a new color based on the file colors that are members of the given color group.

16. The computer processing system according to claim 13, wherein, Determining the representative group color for a given file color group involves calculating the average color of all file colors associated with the given file color group.

17. The computer processing system according to claim 13, wherein, The color transformation describes the color change from a representative group color of the specific file color group to the new color.

18. The computer processing system according to claim 13, wherein, The execution of the instruction further causes the processing unit to display a representative group color of at least one file color group in the user interface on the display.

19. The computer processing system according to claim 13, wherein, In response to receiving the color change input data, the execution of the instruction further causes the processing unit to: Calculate a new representative group color for the specific file color group; and The new representative group color is displayed in the user interface on the display.

20. A non-transitory storage medium readable by a processing unit, the storage medium storing instructions executable by the processing unit to cause the processing unit to perform the method according to any one of claims 1 to 10.

Images