Svg images

[verdeandrea]

Hi guys,

i'm trying to use svg images in an image field. I've added the svg extension to the "Valid File Extensions" section, but when i try to upload an svg it just says "Invalid image".

The question is: is uploading and svg in an image field even possible? And if it's yes, what am I doing wrong?

Thanks!

[LostKobrakai]

Files in an image field are always resized by the php gd library to create the little thumbnail in the admin area. So I would think the image has to be readable by this library and an svg isn't as it's a vector format not a pixelimage. Try using a file field, this should work. 

[adrian]

SVGs definitely work and actually don't need to be resized by GD for the thumbnail.

What version of PW are you running? There was a issue with SVGs for a while, but it is fixed now.

Just for interest, here is the Github issue that describes when things broke and were subsequently fixed and improved:

https://github.com/ryancramerdesign/ProcessWire/issues/597

[verdeandrea]

PW 2.5.3

[adrian]

PW 2.5.3

That version should be fine.

Would you mind attaching the image so I can test. Or PM it to me if you'd prefer.

[verdeandrea]

Sent a PM. Thanks a lot!

[adrian]

Thanks for the file. The problem is that your SVG doesn't have width and height attributes in the SVG tag.

PW uses these to determine the size of the image. Not sure how best to deal with missing attributes, but I'll have a think and chat with Ryan. In the meantime, if you add:

width="1200px" height="500px"

to the SVG tag in the file, you'll find that it uploads just fine.

BTW, I am assuming you are familiar with SVG and know that they are easily editable with a text editor - and if not, now you know

EDIT: Github issue submitted: https://github.com/ryancramerdesign/ProcessWire/issues/802

[adrian]

Just an FYI if you're new to SVG in PW - take a look at ImageRasterizer. It comes in very handy if you want to provide fallback PNGs for older browsers, or you just want to rasterize really complex SVGs (that take too long to render) before displaying them on the site.

[verdeandrea]

Thanks Adrian, you're great!
 

I'll take a look at ImageRasterizer for sure, thanks for your advice.

[Lance O.]

I just came across this same issue with PW 2.5.3. When SVG images are uploaded, PW stalls and won't create the thumbnail image. When I add the dimensions to the SVG file as suggested, the thumbnail image isn't generated and won't properly display on the public site (broken image shown in both cases). :-(

[adrian]

Lance - that is strange. I am going to be doing some work on improving SVG support to handle images without defined width/height in the next few days and will submit a PR to Ryan. I am not sure why it isn't working for you after you have added those attributes though. Could you please PM the image so I can test?

[Lance O.]

@adrian

Just sent you a Dropbox link. Thanks!

[adrian]

Thanks - it seems to be working fine here. The only thing is that you should remove the extra space around the image - not sure what software you are using, but in Illustrator, you want Object > Artboards > Fit to Selected Selected Art.

Do you definitely have the "Display thumbnails in page editor?" setting checked for the image field?

As for the front-end display issue - if you are getting a broken image, can you please inspect the element and check the path to the image and see if it seems logical and also check that the image exists at that location. Let me know what it says.

[adrian]

Just wanted to let you guys know that I have submitted a PR to Ryan to fix this issue: https://github.com/ryancramerdesign/ProcessWire/pull/823

Along with this, I wanted to note somewhere (for now here, although I will probably write a PW SVG tutorial sometime soon) that if you want to embed SVGs into CkEditor RTE fields and be able to drag to resize them, you need to add the following to the "Extra Allowed Content" section on the Input tab of the field:

img[alt,!src,width,height]

This allows the img tags to have width and height attributes, which allows you to resize the image to a fixed number of pixels.

[Maverick]

Hey guys,

I've experienced the same problem with svg, but I have simply added svg to the list of Valid File Extensions (under Details on the Field page). It works just perfectly fine. (I was not changing anything in my svg file, it has width and height defined already, but it didn't work until I've added the file extension)

[adrian]

On 1/8/2015 at 6:53 AM, Maverick said:

Hey guys,

I've experienced the same problem with svg, but I have simply added svg to the list of Valid File Extensions (under Details on the Field page). It works just perfectly fine. (I was not changing anything in my svg file, it has width and height defined already, but it didn't work until I've added the file extension)

Hi Maverick - these are two different issues. You must of course add svg to the list of valid extensions, but the problem reported above is related to SVGs that don't have their width and height set. Illustrator CC has added an option to make SVGs responsive which leaves off these attributes. I have submitted a PR for a fix for this issue, but it hasn't been incorporated yet.

[adrian]

Just wanted to follow up to say that today's PW core updates fix the issue with SVG files with no dimensions specified. There is also a new SVG validator/sanitizer that you should consider installing: http://modules.processwire.com/modules/file-validator-svg-sanitizer/

Please let me know if this solves all the issues with dimensionless / responsive (Illustrator's term, not mine) SVG images.