verdeandrea Posted November 25, 2014 Share Posted November 25, 2014 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! Link to comment Share on other sites More sharing options...
LostKobrakai Posted November 25, 2014 Share Posted November 25, 2014 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. 1 Link to comment Share on other sites More sharing options...
adrian Posted November 25, 2014 Share Posted November 25, 2014 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 1 Link to comment Share on other sites More sharing options...
verdeandrea Posted November 25, 2014 Author Share Posted November 25, 2014 PW 2.5.3 Link to comment Share on other sites More sharing options...
adrian Posted November 25, 2014 Share Posted November 25, 2014 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. 1 Link to comment Share on other sites More sharing options...
verdeandrea Posted November 25, 2014 Author Share Posted November 25, 2014 Sent a PM. Thanks a lot! Link to comment Share on other sites More sharing options...
adrian Posted November 25, 2014 Share Posted November 25, 2014 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 2 Link to comment Share on other sites More sharing options...
adrian Posted November 25, 2014 Share Posted November 25, 2014 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. 1 Link to comment Share on other sites More sharing options...
verdeandrea Posted November 25, 2014 Author Share Posted November 25, 2014 Thanks Adrian, you're great! I'll take a look at ImageRasterizer for sure, thanks for your advice. 2 Link to comment Share on other sites More sharing options...
Lance O. Posted December 2, 2014 Share Posted December 2, 2014 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 More sharing options...
adrian Posted December 2, 2014 Share Posted December 2, 2014 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 More sharing options...
Lance O. Posted December 2, 2014 Share Posted December 2, 2014 @adrian Just sent you a Dropbox link. Thanks! Link to comment Share on other sites More sharing options...
adrian Posted December 2, 2014 Share Posted December 2, 2014 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 More sharing options...
adrian Posted December 10, 2014 Share Posted December 10, 2014 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. 6 Link to comment Share on other sites More sharing options...
Maverick Posted January 8, 2015 Share Posted January 8, 2015 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 More sharing options...
adrian Posted January 8, 2015 Share Posted January 8, 2015 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 More sharing options...
adrian Posted April 3, 2015 Share Posted April 3, 2015 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. 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now