Jump to content

Svg images


verdeandrea
 Share

Recommended Posts

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".

post-2122-0-99200400-1416942664_thumb.pn

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

Thanks!

Link to comment
Share on other sites

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. 

  • Like 1
Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

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

  • Like 2
Link to comment
Share on other sites

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). :-(

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

  • 2 weeks later...

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.

  • Like 6
Link to comment
Share on other sites

  • 4 weeks later...

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)

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

  • 2 months later...

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.

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...