eZ Community » Forums » Setup & design » Allowing SVG in an ezimage datatype
expandshrink

Allowing SVG in an ezimage datatype

Allowing SVG in an ezimage datatype

Monday 06 May 2013 3:30:21 pm - 7 replies

By default the ezimage datatype does not allow SVG files (produces a validation error). Does anyone have any advice on how to use the ezimage datatype for storing and displaying SVG images?

Thanks,

Fraser

Tuesday 07 May 2013 5:20:03 pm

ezimage is a powerful datatype handling bitmap images and doing all kind of tricks on them, like image variations, extracting exif data, and more. I doubt that it should handle SVG as well, as this is completely different both in the requirements for data handling and storage as well as for the templates (as far as I know, only IE allows SVGs in the IMG tag).

The best approach would be to create a new datatype. Given the increasing acceptance of SVG it would certainly deserve it.

Tuesday 07 May 2013 6:14:14 pm

From a user perspective it would be useful to be able to present the user with one "field" where they can upload an image in all valid image formats. We can work out how to handle the file type in the back end.

SVG will work in an img tag in pretty much all browsers except IE8 and down and Android 2.3 and down: http://caniuse.com/#feat=svg-img.  It might be even better to present the SVG inline though so you have more css control. Image Magic can be used to automatically create a png that can be used as a fallback for problem browsers.  Here's one example fallback approach:

 <object data="your.svg" type="image/svg+xml">
            <img src="yourfallback.jpg" />
</object>

Modified on Tuesday 07 May 2013 6:20:26 pm by Fraser Hore

Wednesday 08 May 2013 10:35:54 am

Pull requests, anyone? happy.gif Emoticon

Wednesday 08 May 2013 4:44:02 pm

Hi Fraser

I intend to agree with you... Keeping the SVG as original and have Imagemagick create PNG fallbacks is a charming idea - and it even worked in my hacked local 4.4 installation - at first sight.

One problem seems to be the PHP getimagesize() function used in ezimagetype.php to check the validity of the uploaded file. Eliminating this call in line 159 allowed the file to be uploaded.

Another problem seems to be that the SVG file is converted after the upload, so that the "original" is no longer SVG, but JPEG or PNG. Although you get all image variations, you loose the vector image that would nicely display and scale.

Obviously, it is possible to enhance ezimage, but it still seems quite tricky. I agree with Gaetano blunk.gif Emoticon

Regards, Donat 

Modified on Wednesday 08 May 2013 5:47:49 pm by Donat Fritschy

Wednesday 08 May 2013 9:56:16 pm

Hi Donat,

Thanks for finding the source of the problem uploading SVGs! I've got this working quite nicely (albeit with a hack of the kernal as you pointed out). Here's what I did:

I commented the whole validation error thrown by getimagesize (for me it was lines 230 - 237) :

$info = getimagesize( $imagefile );               
if ( !$info )    {
      /* Commented out to allow uploading of SVG files.
      $contentObjectAttribute->setValidationError( ezpI18n::tr( 'kernel/classes/datatypes',  'A valid image file is required.' ) ); 
      return eZInputValidator::STATE_INVALID;
       */ 
}

I suppose it would be better to test if it is an SVG file and only then skip the error.

I initially had the second problem that you identified, that the uploaded svg was automatically converted to a gif. To solve this I overrode the Conversion Rules in my image.ini override to comment out the conversion *;img/jpeg:

[MIMETypeSettings]

ConversionRules[]
ConversionRules[]=image/gif;image/png
ConversionRules[]=image/x-xpixmap;image/png
# ConversionRules[]=*;image/jpeg

After this change the original alias remained the original svg file. Strangely I later removed this block of settings and the original alias is still getting the svg file. 

Then in my image.ini override I made a reference alias set to PNG, and then based my other alias' on the reference:

[reference]
MIMEType=image/png

[small]
Reference=reference
Filters[]
Filters[]=geometry/scaledownonly=100;160

For the fallback to png I decided to use Modernizr and jQuery, since I'm already using them:

<!-- Fallback for lack of SVG support in IE8 and below -->
<script>
    <!-- {literal}
        if(!Modernizr.svg) {
            $('img[src*="svg"]').attr('src', function() {
                return $(this).attr('src').replace('.svg', '_reference.png');
            });
        }
        {/literal} -->
</script>

Friday 10 May 2013 8:17:02 am

Hi and thanks for your answers,

The problem is not I don't success to use GD or ImageMagick : I can only use GD on my server and my image.ini files are configured in this way.

Friday 10 May 2013 7:07:37 pm

Hi Francisco,

I'm not sure that I understand your question. You would have to have GD or ImageMagick to the conversion to a png or jpeg for this to work. Unless you had some other server process that would work in the background to do the conversion.  If it's just a matter of configuring you ez installation to use ImageMagick, then just add this to your image.ini override:

[ImageMagick]

IsEnabled=true

expandshrink

You must be logged in to post messages in this topic!

36 542 Users on board!

Forums menu

Proudly Developed with from