Turning Images into Interactive SVGs for Coloring with PHP and Vanilla JavaScript
This is a submission for Weekend Challenge: Passion Edition
What I Built
I created Color Your Passion, a web application capable of transforming raster images into interactive SVG illustrations that can be colored directly in the browser.
The tool supports PNG, JPG, JPEG, and WebP files. Although different types of images can be processed, the best results are achieved with illustrations that have clearly defined colors, visible outlines, few gradients, and larger regions. Photographs and highly detailed images can also be processed, but they tend to generate more complex SVGs with a larger number of colorable areas.
To represent the theme of Passion, I chose one of the greatest passions in the world: football.
Instead of using pre-made images, I developed a collection of specialized prompts designed specifically for Google Gemini.
These prompts were carefully created to generate football scenes in a geometric low-poly style, featuring large regions, clearly defined outlines, and compositions that can later be converted into colorable SVG illustrations.
📄 Explore the complete collection of prompts for Google Gemini
The complete application flow works as follows:
- The user selects one of the specialized prompts and uses it to generate an illustration with Google Gemini.
- The generated image is uploaded to the Color Your Passion Vectorizer.
- The application automatically converts the raster image into an SVG composed of multiple independent regions.
- The user can color the illustration directly in the browser using a mouse or touch input.
- Once finished, the result can be exported as an SVG or PNG file.
The project was created to solve the following problem:
Images generated by artificial intelligence can produce excellent illustrations, but they still consist of a matrix of pixels. Their visual areas do not exist as independent and editable elements, making it difficult to create a predictable coloring experience in which each region can be selected, recolored, and exported separately.
To solve this problem, I developed a vectorization process that transforms raster images into SVGs composed of independent regions, allowing each area to be selected and colored individually.
The collection includes 20 football moments, such as bicycle kicks, volleys, free kicks, top-corner saves, goal celebrations, and a captain lifting the trophy.
All these illustrations follow the same creative workflow:
Specialized prompt → Google Gemini → Color Your Passion Vectorizer → Interactive colorable SVG
This demonstrates how the application can transform AI-generated artwork into interactive digital coloring experiences.
The connection with the Passion theme comes directly from this creative process. Football provides the inspiration for the illustrations, while the application transforms those images into something entirely new: an experience in which anyone can color, customize, and create their own version of the artwork.
The tool can be used in different scenarios:
- Digital coloring websites and applications
- Educational activities
- Children's content
- Coloring books and printable materials
- Interactive experiences using AI-generated images
Core Features
- A collection of specialized prompts for generating football illustrations
- A creative workflow optimized for illustrations generated with Google Gemini
- Support for PNG, JPG, JPEG, and WebP files up to 10 MB
- Server-side vectorization using PHP
- Automatic conversion of raster images into SVG
- Generation of independent regions optimized for coloring
- Independent
<path>elements for each colorable area - A separate line-art layer that preserves the outlines
- Three conversion presets: Simple, Balanced, and Detailed
- Sliders for fine-tuning the vectorization parameters
- Interactive coloring using mouse or touch
- Undo and redo actions
- Local persistence using
localStorage - Export to SVG and PNG
- Automatic fallback between the rewritten endpoint and the direct PHP endpoint
How I Built It
The Color Your Passion Vectorizer was built with a simple architecture divided between server-side image processing in PHP and an interactive experience developed with vanilla JavaScript.
The process begins in the browser, where the user selects a PNG, JPG, JPEG, or WebP image. Before uploading it, the interface validates the file and allows the user to select a conversion preset or manually adjust the vectorization parameters.
Upload and server-side processing
After the image is submitted, the file and the selected settings are sent to a PHP endpoint.
The backend is responsible for:
- Validating the file format and size
- Loading the raster image
- Applying the parameters selected by the user
- Simplifying the visual information in the image
- Identifying regions that can be transformed into colorable areas
- Generating the final SVG document
I placed this part of the process on the server to centralize image processing and avoid depending on frontend frameworks or external vectorization services.
From raster regions to SVG paths
The main challenge was transforming an image made of pixels into a structure that could be manipulated directly in the browser.
During conversion, the visual regions of the image are transformed into independent SVG elements. Each colorable area is represented by a <path> element, allowing its fill property to be changed without affecting neighboring regions.
A simplified version of the generated structure looks like this:
<svg viewBox="0 0 1024 1024">
<path
class="color-region"
d="..."
fill="#F4C542"
/>
<path
class="color-region"
d="..."
fill="#2E7D32"
/>
</svg>
In addition to the fillable regions, the SVG contains a separate line-art layer responsible for preserving the illustration's outlines.
This layer is displayed above the colored areas, helping the drawing maintain its visual definition even after the user changes the original colors.
Conversion presets
Not every image requires the same level of processing. For this reason, I created three conversion presets:
- Simple: prioritizes fewer regions and a lighter SVG
- Balanced: provides a balance between visual fidelity and complexity
- Detailed: preserves a larger amount of information from the original image
The sliders available in the interface allow users to adjust these parameters manually.
This is important because illustrations with solid colors require different settings from images containing shadows, gradients, or many small details.
Interactive coloring with JavaScript
After PHP returns the SVG, JavaScript inserts the result directly into the page and registers interaction events for every colorable region.
When the user selects a color and clicks or taps a <path>, JavaScript changes the fill attribute of that element:
path.setAttribute('fill', selectedColor);
Because each region is an independent element, the application does not need to run a paint bucket algorithm for every interaction. Coloring is performed by directly changing the property of the selected region.
This approach also allows the same interaction system to work with a mouse on desktop computers and touch input on smartphones and tablets.
Undo and redo
To implement undo and redo actions, every color change is stored in a history.
Each history entry contains information such as:
- The modified region
- The previous color
- The new color
When the user selects undo, the application restores the previous color and moves the change to the redo history.
When a new coloring action is performed, the redo history is cleared to prevent inconsistent states.
Local persistence
The coloring state is stored in the browser's localStorage.
This allows the user's changes to remain available locally during the experience without requiring an account or storing the illustration in a database.
Persistence was kept on the frontend because the data belongs only to the user's creative session and does not need to be sent back to the server.
Exporting SVG and PNG
SVG export uses the same vector structure modified by the user. Before downloading the file, the application serializes the <svg> element with all the new colors applied.
To generate a PNG, the final SVG is rendered inside a <canvas> element. After rendering, the canvas content is converted into a raster image that is ready to download.
This process provides two export formats:
- SVG, which preserves vector scalability and editability
- PNG, which is convenient for sharing and using the result as a conventional image
Endpoint fallback
Because the vectorizer can also run inside a PHP and WordPress structure, I implemented a fallback system for the conversion endpoint.
The application first attempts to use the friendly URL created through server-side rewriting. If that route is unavailable, JavaScript makes another request directly to the PHP file responsible for the conversion.
This solution allows the project to work in environments with different URL rewriting configurations, including shared hosting platforms and installations where mod_rewrite is configured differently.
Why vanilla technologies?
I chose to develop the project with PHP, vanilla JavaScript, HTML, CSS, and SVG to keep the application independent, lightweight, and easy to host.
Without requiring a frontend framework or an external service for each conversion, the vectorizer can be installed in a conventional PHP environment and run directly in the browser.
The final division of responsibilities looks like this:
PHP → File upload, image processing, and SVG generation
JavaScript → Interface, coloring, history, persistence, and export
SVG → Visual structure and interactive regions
User Experience
The user flow was designed to be extremely simple:
- Select one of the available football prompts.
- Paste the prompt into Google Gemini.
- Generate an illustration.
- Upload the image to the Vectorizer.
- Preview the original image.
- Select a preset or customize the vectorization parameters.
- Click Convert to SVG.
- The PHP backend automatically converts the image into an SVG composed of independent regions that can be filled individually.
- The generated SVG is immediately displayed next to the original image.
- Select any color and paint the illustration using a click or touch.
- Undo or redo changes, download the SVG, or export the finished artwork as a PNG.
The interface displays the original image and the converted SVG side by side, making it easy to compare the results.
On mobile devices, the layout automatically switches to a single-column format, preserving a comfortable experience on smaller screens.
Demo
- 🔗 Explore the Color Your Passion project — View the football illustration collection and the complete project experience.
- 🎨 Try the Color Your Passion Vectorizer — Upload an image, convert it into an SVG, and color it directly in your browser.
Code
Although the repository is part of a larger PHP and WordPress structure, the entire vectorizer was developed independently inside the vectorizer/ directory.
📁 View the source code on GitHub
The application was built using only native web technologies:
- PHP
- Vanilla JavaScript
- SVG
- HTML5
- CSS3
No framework was used.
The application architecture, interface, conversion workflow, interactive coloring system, and file export functionality were implemented specifically for this project using PHP and vanilla JavaScript.
Prize Categories
Best Use of Google AI
Google Gemini was used as an essential part of the project's creative process, not only to generate individual images, but also as a tool for experimentation and prompt engineering oriented toward the vectorization pipeline.
During development, I noticed that generic prompts for football scenes usually produced images with complex backgrounds, shadows, textures, gradients, small details, and overlapping regions.
Although these results could be visually interesting, those characteristics made it more difficult to convert the images into SVG illustrations suitable for coloring.
For this reason, I developed and tested different prompt variations until I found a structure that worked better with the Color Your Passion Vectorizer.
The prompts were created with specific constraints, including:
- Geometric low-poly style
- Large and clearly separated regions
- Solid and contrasting colors
- Few gradients and textures
- Visible and clearly defined outlines
- Centered compositions
- Simple backgrounds
- A reduced number of visual elements
- No text, logos, or branding
- Fewer small details and narrow regions
These decisions were not only aesthetic. They were designed to directly improve the technical results of the vectorization process.
The low-poly style works especially well because it divides the illustration into larger geometric shapes with clearer color transitions.
This makes it easier to identify regions during processing and helps generate more organized <path> elements that are better suited for interactive coloring.
Larger regions also make the coloring experience more comfortable on mobile devices, where very small areas would be difficult to select using touch input.
The tests showed a clear difference between generic prompts and specialized prompts.
Generic prompts:
- Produced unnecessary backgrounds, shadows, and small details
- Generated many small regions
- Resulted in more complex SVGs that were harder to color
Specialized prompts:
- Produced cleaner compositions
- Created larger and more visually separated regions
- Generated SVGs that were better suited for interactive coloring
Based on these tests, I developed a collection of prompts focused on memorable football moments, including bicycle kicks, volleys, free kicks, goalkeeper saves, aerial duels, and goal celebrations.
The final workflow became:
Prompt engineering → Google Gemini → Illustration generation → Color Your Passion Vectorizer → Interactive colorable SVG
📄 View all Google Gemini prompts on GitHub
In this project, Gemini is used during the visual generation stage through a public collection of specialized prompts.
Instead of relying on generic instructions, I developed prompts based on the technical requirements of the vectorizer, connecting AI image generation with the creation of an interactive digital coloring experience.
Top comments (0)