Specify a custom CSS stylesheet to be applied to SVG source images before they are rendered.
With this parameter you can change the appearance of a SVG image on the fly, like the fill color, stroke or opacity of its elements, without modifying the original file. This is useful to generate multiple variations of logos, icons or illustrations using a single SVG source image.
This parameter only applies to source images in SVG format. For any other input format the parameter is ignored.
Values
This parameter accepts a string with one or more CSS rules, using any selector and property supported by SVG.
If this parameter is not specified or an empty value is used no custom stylesheet will be applied and the SVG image will be rendered with its original styles.
Invalid CSS rules, properties or values are ignored. A value like path { fill: invalid; } will render the SVG image with its original styles instead of returning an error.
The value of this parameter must be URL encoded to avoid problems with URL reserved characters commonly used with CSS. This is only needed in the case that you are specifying the value manually, if you are using one of our integration libraries the encoding will be done automatically.
Styles precedence
The stylesheet specified with this parameter has a lower precedence than the styles defined inside the SVG image:
-
Presentation attributes like
fill="black" are overridden by the css parameter.
-
Styles defined with a
style attribute like style="fill: black" or inside a <style> element are not overridden by the css parameter.
In order to override styles defined inside the SVG image you can add !important to your CSS declarations (i.e. path { fill: red !important; }).
Examples
For the following examples we are using a SVG image with a white logo, specifying png as output format to preserve transparency.
Change the color of all the paths in the SVG image using css=path { fill: orange; } parameter:
GET
https://assets.imglab-cdn.net/logo.svg?css=path+%7B+fill%3A+orange%3B+%7D&format=png
Multiple CSS properties can be used on the same rule. In this example we are changing the fill color and making it semi-transparent with css=path { fill: orange; fill-opacity: 0.4; }:
GET
https://assets.imglab-cdn.net/logo.svg?css=path+%7B+fill%3A+orange%3B+fill-opacity%3A+0.4%3B+%7D&format=png