Gallery
Instagram
Flickr
Pinterest
DaveCOLLIER
DevelopmentPages
SVG Modder
Modifies the stylesheet in an svg file to a simplified number of colours
Description
SVG Modder
One way of defining an SVG file is using stylesheets. That is the way that Adobe Illustrator does it. An SVG file is an XML-format text file, so modifying the stylesheets definitions is quite straightforward.
The Javascript for this page takes each of the ‘fill’ definitions of the input file‘s stylesheets in turn, where the fill colour is specified as hexadecimal, and modifies them according the the criteria chosen by the radio button options.
The radio buttons are colour selection buttons similar to my Mosaic Tiles page and my Mosaic Stars page where a number of colours can be chosen by colour-pick.
Each of the stylesheet ‘fill’s is matched to the picked colours and the nearest is chosen to replace the ‘fill’ colour. Nearest is on brightness, hue and saturation, each matched separately by percentage difference and the lowest of the aggregate of the three percentages is chosen.
Select an svg file
Number of colours
  RGB: brightness: 255
  RGB: brightness: 255
  RGB: brightness: 255
canvas pointer
H:°
S: %
V: %
V: is vertical position on the colour block, it is related to but different from brightness
R:
G:
B:
Web Hex:        Brightness: 125
Download Settings
Load Saved Settings File:
Paint Result
Formula for calculating brightness:
gamma
squared
linear
gamma exponent
sRGB
YIQ
CIE XYZ
DCs
Lgtness
Average
Exponent if blank or zero is 2.4 For details of what the calculations mean see:
Formulas for Calculating Pixel Brightness
original svg
original svg
converted svg:
This page last updated 22 August 2024