SVG fill color transparency alpha

Question

Is it possible to set a transparency or alpha level on SVG fill colours   I ve tried adding two values to the fill tag  changing it from fill   044B94  to fill   044B9466    but this doesn t work

User · Answer

Use attribute fill-opacity in your element of SVG   Default value is 1  minimum is 0  in step use decimal values EX  0 5   50  of alpha  Note  It is necessary to define fill color to apply fill-opacity   See my example   References

User · Answer

fill   044B9466    This is an RGBA color in hex notation inside the SVG  defined with hex values  This is valid  but not all programs can display it properly     You can find the browser support for this syntax here  https   caniuse com  feat css-rrggbbaa  As of August 2017  RGBA fill colors will display properly on Mozilla Firefox  54   Apple Safari  10 1  and Mac OS X Finder s  Quick View   However Google Chrome did not support this syntax until version 62  was previously supported from version 54 with the Experimental Platform Features flag enabled

User · Answer

As a not yet fully standardized solution  though in alignment with the color syntax in CSS3  you can use e g fill  rgba 124 240 10 0 5    Works fine in Firefox  Opera  Chrome   Here s an example

User · Answer

To change transparency on an svg code the simplest way is to open it on any text editor and look for the style attributes  It depends on the svg creator the way the styles are displayed  As i am an Inkscape user the usual way it set the style values is through a style tag just as if it were html but using svg native attributes like fill  stroke  stroke-width  opacity and so on  opacity affects the whole svg object  or path or group in which its stated and fill-opacity  stroke-opacity will affect just the fill and the stroke transparency  That said  I have also used and tasted to just use fill and instead of using fff use instead the rgba standard like this rgba 255  255  255  1  just as in css  This works fine for must modern browsers  Keep in mind that if you intend to further reedit your svg the best practice  in my experience  is to always keep an untouched version at hand  Inkscape is more flexible with hand changed svgs but Illustrator and CorelDraw may have issues importing and edited svg  Example  lt path style  quot fill  ff0000 fill-opacity 1 stroke  1a1a1a stroke-width 2px stroke-opacity 1 quot  d  quot m 144 44226 461 14425 q 16 3125 -15 05769 37 64423 -15 05769 21 33173 0 36 38942 15 05769 15 0577 15 05769 15 0577 36 38942 0 21 33173 -15 0577 36 38943 -15 05769 16 3125 -36 38942 16 3125 -21 33173 0 -37 64423 -16 3125 -15 05769 -15 0577 -15 05769 -36 38943 0 -21 33173 15 05769 -36 38942 z M 28 99995 35 764435 l 85 32692 0 23 84135 52 701923 386 48078 0 q 10 03846 0 17 5673 7 528847 8 78366 7 528845 8 78366 17 567305 0 7 52885 -2 50962 12 54808 l -94 11058 161 87019 q -13 80288 27 60577 -45 17307 27 60577 l -194 4952 0 -26 35096 40 15385 q -2 50962 6 27404 -2 50962 7 52885 0 6 27404 6 27404 6 27404 l 298 64424 0 0 50 1923 -304 91828 0 q -25 09615 0 -41 40865 -13 80288 -15 05769 -13 80289 -15 05769 -38 89904 0 -15 05769 6 27404 -25 09615 l 38 89903 -63 9952 -92 855766 -189 475962 -52 701924 0 0 -52 701923 z M 401 67784 461 14425 q 15 05769 -15 05769 36 38942 -15 05769 21 33174 0 36 38943 15 05769 16 3125 15 05769 16 3125 36 38942 0 21 33173 -16 3125 36 38943 -15 05769 16 3125 -36 38943 16 3125 -21 33173 0 -36 38942 -16 3125 -15 05769 -15 0577 -15 05769 -36 38943 0 -21 33173 15 05769 -36 38942 z quot   gt   Example 2  lt path style  quot fill  ff0000 fill-opacity  5 stroke  1a1a1a stroke-width 2px stroke-opacity 1 quot  d  quot m 144 44226 461 14425 q 16 3125 -15 05769 37 64423 -15 05769 21 33173 0 36 38942 15 05769 15 0577 15 05769 15 0577 36 38942 0 21 33173 -15 0577 36 38943 -15 05769 16 3125 -36 38942 16 3125 -21 33173 0 -37 64423 -16 3125 -15 05769 -15 0577 -15 05769 -36 38943 0 -21 33173 15 05769 -36 38942 z M 28 99995 35 764435 l 85 32692 0 23 84135 52 701923 386 48078 0 q 10 03846 0 17 5673 7 528847 8 78366 7 528845 8 78366 17 567305 0 7 52885 -2 50962 12 54808 l -94 11058 161 87019 q -13 80288 27 60577 -45 17307 27 60577 l -194 4952 0 -26 35096 40 15385 q -2 50962 6 27404 -2 50962 7 52885 0 6 27404 6 27404 6 27404 l 298 64424 0 0 50 1923 -304 91828 0 q -25 09615 0 -41 40865 -13 80288 -15 05769 -13 80289 -15 05769 -38 89904 0 -15 05769 6 27404 -25 09615 l 38 89903 -63 9952 -92 855766 -189 475962 -52 701924 0 0 -52 701923 z M 401 67784 461 14425 q 15 05769 -15 05769 36 38942 -15 05769 21 33174 0 36 38943 15 05769 16 3125 15 05769 16 3125 36 38942 0 21 33173 -16 3125 36 38943 -15 05769 16 3125 -36 38943 16 3125 -21 33173 0 -36 38942 -16 3125 -15 05769 -15 0577 -15 05769 -36 38943 0 -21 33173 15 05769 -36 38942 z quot   gt   Example 3  lt path style  quot fill rgba 255  0  0   5 stroke  1a1a1a stroke-width 2px stroke-opacity 1 quot  d  quot m 144 44226 461 14425 q 16 3125 -15 05769 37 64423 -15 05769 21 33173 0 36 38942 15 05769 15 0577 15 05769 15 0577 36 38942 0 21 33173 -15 0577 36 38943 -15 05769 16 3125 -36 38942 16 3125 -21 33173 0 -37 64423 -16 3125 -15 05769 -15 0577 -15 05769 -36 38943 0 -21 33173 15 05769 -36 38942 z M 28 99995 35 764435 l 85 32692 0 23 84135 52 701923 386 48078 0 q 10 03846 0 17 5673 7 528847 8 78366 7 528845 8 78366 17 567305 0 7 52885 -2 50962 12 54808 l -94 11058 161 87019 q -13 80288 27 60577 -45 17307 27 60577 l -194 4952 0 -26 35096 40 15385 q -2 50962 6 27404 -2 50962 7 52885 0 6 27404 6 27404 6 27404 l 298 64424 0 0 50 1923 -304 91828 0 q -25 09615 0 -41 40865 -13 80288 -15 05769 -13 80289 -15 05769 -38 89904 0 -15 05769 6 27404 -25 09615 l 38 89903 -63 9952 -92 855766 -189 475962 -52 701924 0 0 -52 701923 z M 401 67784 461 14425 q 15 05769 -15 05769 36 38942 -15 05769 21 33174 0 36 38943 15 05769 16 3125 15 05769 16 3125 36 38942 0 21 33173 -16 3125 36 38943 -15 05769 16 3125 -36 38943 16 3125 -21 33173 0 -36 38942 -16 3125 -15 05769 -15 0577 -15 05769 -36 38943 0 -21 33173 15 05769 -36 38942 z quot   gt   Notice that in the last example the fill-opacity has been removed as rgba standard covers both color and alpha channel

User · Answer

You use an addtional attribute  fill-opacity  This attribute takes a decimal number between 0 0 and 1 0  inclusive  where 0 0 is completely transparent   For example    lt rect     fill   044B94  fill-opacity  0 4   gt    Additionally you have the following    stroke-opacity attribute for the stroke opacity for the entire object

User · Answer

To make a fill completely transparent  fill  transparent  seems to work in modern browsers  But it didn t work in Microsoft Word  for Mac   I had to use fill-opacity  0

[colors] SVG fill color transparency / alpha?

Examples related to colors

Examples related to svg

Examples related to transparency

Examples related to alpha

Examples related to fill