Gallery
Instagram
Flickr
Pinterest
DaveCOLLIER
DevelopmentPages
SVG Modder
Modifies styles in an svg file to defined criteria
Description
SVG Modder
An SVG file is a text file in XML format with no checksums so is easy to modify, in principle. Fill and stroke colours are defined using stylesheets, inline styles, or the SVG parameters fill, stroke, fillStyle and strokeStyle, so straightforward to modify.
The Javascript for this page takes each of the fill and stroke definitions of the input file in turn and modifies according the the criteria chosen by the various options. Colours are converted to hexadecimal format if they are in CSS RGB format, for reduced complexity in processing.
For the Reduced Colour Set option, each of the picked up colour styles is matched to the picked colours and the nearest is chosen to replace the each colour definition. Nearest is on brightness, each matched separately by percentage difference and the lowest of the aggregate of the three percentages is chosen.
The result is an SVG file that can be downloaded, it is also loaded into an HTML Canvas element so can be downloaded as a png-format file.
Select an svg file
original svg
original svg
Include Fill Colours Include Stroke Colours
Reduced Colour Set
Maintain Saturation Maintain Brightness
by selecting 1 as the number of colours below and checking Maintain Brightness you can make an SVG of a single hue.
Number of colours
Adjust Brightness, Contrast and Saturation Throughout
brightness %
contrast %
saturation %
Adjust Hue Balance towards Complimentary
%
Formula for calculating brightness:
Download Settingsload saved settings
Paint Result
Show SVG Canvas