Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

Customising the CMS /

Moderators: martimiz, Sean, Ed, biapar, Willr, Ingo, swaiba

SVG image fill not showing on the frontend

Go to End

5 Posts   1614 Views


Community Member, 3 Posts

28 January 2014 at 9:31am


This is my first post, so sorry if I have missed some guidelines.

I am building a site that utilises RaphaelJS and SVG. Shapes created using the library work as expected, but when I try to replace an image with a SVG path and image fill, it just shows as having a black fill.

If I copy the exact code generated by Raphael and place it into an html page, it works as expected. And the code follows the SVG spec so is above board.

My initial thoughts were a permissions error, so I 777'd everything (locally of course) and made sure the owner was correct but still nothing.

Is there somewhere in Silverstripe's page generation that could be blocking SVG image patterns? Has anyone come across this before?

Attached is an image of the black fill, and one of what it looks like in non Silverstripe setup.

Thanks for your help.


Community Member, 3 Posts

28 January 2014 at 9:34am

Oh and it's Silverstripe version 3.1.1


Community Member, 4 Posts

18 February 2014 at 12:58pm

Edited: 18/02/2014 1:02pm

The reason why the image isn't appearing is usually the base href tag that silverstripe includes by default in the template.

<base href="" target="_blank">

It be in the head of the template and look like below.

<% base_tag %>

If you remove that tag it should fix the issue. But some other functions in silverstripe may have issues without it.


Community Member, 3 Posts

18 February 2014 at 2:38pm

That's great, thanks very much! It works now.


Community Member, 1 Post

20 November 2014 at 4:10pm

great solution. saved the day for us.