Change fill color of path of SVG URI data in pseudo-element

Question

Is it possible to use CSS to change the color of the SVG path that is in the pseudo-element URI data element?

<a href="http://externalurl/">External Site</a> 

CSS

 a[href^="http://"]:after { content: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMTVweCIgaGVpZ2h0PSIxM3B4IiB2aWV3Qm94PSItMyAyMSAxNSAxMyIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAtMyAyMSAxNSAxMyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBhdGggZmlsbD0iIzk5OTk5QSIgZD0iTTEyIDIxSDB2M2gtM3YxMEg5di0zaDNWMjF6IE04IDMzSC0ydi04aDJ2Nmg4VjMzeiBNOSAyN0g3djJINXYtMkgzdi0yaDJ2LTJoMnYyaDJWMjd6Ii8+PC9zdmc+); } a[href^="http://"]:hover:after path { fill: #000; } //"]: after {content: url (data: image / svg + xml; base64, PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMTVweCIgaGVpZ2h0PSIxM3B4IiB2aWV3Qm94PSItMyAyMSAxNSAxMyIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAtMyAyMSAxNSAxMyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI + PHBhdGggZmlsbD0iIzk5OTk5QSIgZD0iTTEyIDIxSDB2M2gtM3YxMEg5di0zaDNWMjF6IE04IDMzSC0ydi04aDJ2Nmg4VjMzeiBNOSAyN0g3djJINXYtMkgzdi0yaDJ2LTJoMnYyaDJWMjd6Ii8 + PC9zdmc +); a[href^="http://"]:after { content: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMTVweCIgaGVpZ2h0PSIxM3B4IiB2aWV3Qm94PSItMyAyMSAxNSAxMyIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAtMyAyMSAxNSAxMyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBhdGggZmlsbD0iIzk5OTk5QSIgZD0iTTEyIDIxSDB2M2gtM3YxMEg5di0zaDNWMjF6IE04IDMzSC0ydi04aDJ2Nmg4VjMzeiBNOSAyN0g3djJINXYtMkgzdi0yaDJ2LTJoMnYyaDJWMjd6Ii8+PC9zdmc+); } a[href^="http://"]:hover:after path { fill: #000; } 

Answer 1

Not so, since svg content is in another document. Styles do not apply to documents.

And since svg will be seen as a dumb image when done with CSS, setting the hover style on the path inside svg won't help either.

I would recommend putting svg inline in the document if you want to put some shapes in it.

However, another option for changing the color of an image is to use filters, as they can be applied externally. If your image is simple, that might work.