How to follow the text color of web page in SVG? Usage boundaries of currentColor
The fill or stroke of an inline SVG can inherit the current text color using currentColor. If the color values are hardcoded internally in the file, or loaded independently using an img, changing the color of the outer text will usually not change the graphic as expected.
Determine the problem and applicable conditions first
Two-color and multi-color brand logos cannot all be replaced with the same inherited color. Also distinguish the hollow wireframe with fill="none": forcing all fills to be colored may make the originally hollow icon solid.
Process and check in order
- Confirm whether the fill, stroke or a part needs to be changed.
- Use currentColor in trusted inline SVG copies.
- Test readability in default, hover, disabled and dark modes.
Check the finished result
Don’t break brand norms to unify the theme. If the icon is loaded through img, you should consider providing an independent theme version; for complex multi-color SVG, specifying the theme color item by item is more controllable than global override.
SVG format basis and reference materials
SVG can contain both vector shapes, images, and text. Therefore, a file name ending in .svg does not alone prove that the original image has been converted to an editable path.W3C SVG 2 Specification: SVG Graphics Objectdescribes these object types.
The above information is used to describe the file format. The upload restrictions, membership requirements, results saving and editing capabilities of this site are subject to the page description and actual functions.