SVG logo in OpenCart

5 мин на чтение

The widespread use of SVG today, especially when it comes to logos in web applications and sites is easy to explain. Zoo permits screen every year only increases, which means that the constant appearance of more and more HighDPI screens is inevitable. By the way, I am now writing an article on a Macbook with a screen resolution smaller than that on my smartphone.

For example, a usual raster logo with a size of 250×40 pixels, when you try to display it on a smartphone with FullHD it will be very scary, it will be smeared as eggs in McDonald’s breakfast. By the way, here’s something like this:

And here is the same logo, but in SVG format.

What is noteworthy, the size of this logo is only 1 KB. and it will be perfectly displayed on a screen with any resolution.

SVG achieves such clarity very simply – drawing “images” occurs directly in the browser of the device along curves. And how long will be a curve – 10 px or 110 px is no longer important.

Allow SVG in OpenCart 2.x

Why 2.x? Yes, I’m lazy to write under all other versions of the instructions. If you are a developer so you will understand how to rebuild a code for your version of OC by my example. The only thing I can say is that while for an unknown reason in OpenCart 3.x, the src="" attribute of <img> for .svg doesn’t use the URL address (such as /image/catalog/image.svg), but the server path (/home/var/www/hostname/image/image.svg), which is not allowed local php scripts for accessing a file. It’s clear that you need to poke around in the image library, but I haven’t time for that right now.

So let’s return to 2.x. When you try to upload a file .svg to OpenCart, you will be informed that this is an incorrect file type. To fix this, let’s allow uploading .svg files.

Please open admin/controller/common/filemanager.php and replace this line

// Get files
 $files = glob($directory . '/' . $filter_name . '*.{jpg,jpeg,png,gif,JPG,JPEG,PNG,GIF}', GLOB_BRACE);

you must add here svg types by lowercase and uppercase because image.svg и image.SVG TWO different files in linux file system.

It’s could be something like this:

$files = glob($directory . '/' . $filter_name . '*.{jpg,jpeg,png,gif,JPG,JPEG,PNG,GIF,svg,SVG}', GLOB_BRACE);

Than this part of code:

// Allowed file extension types
 $allowed = array(
 'jpg',
 'jpeg',
 'gif',
 'png'
 );

Replace with this one:

// Allowed file extension types
 $allowed = array(
 'jpg',
 'jpeg',
 'gif',
 'png',
 'svg'
 );

A little bit more, replace this:

// Allowed file mime types
 $allowed = array(
 'image/jpeg',
 'image/pjpeg',
 'image/png',
 'image/x-png',
 'image/gif'
 );

With this:

// Allowed file mime types
 $allowed = array(
 'image/jpeg',
 'image/pjpeg',
 'image/png',
 'image/x-png',
 'image/gif',
 'image/svg+xml'
 );

If you are so lazy as me (over even more) you can use this link to OpenCart Marketplace where I have published ocmod file with all above changes.

SVG enable for OpenCart 2

Have fun :)

Leave a Reply

Your email address will not be published. Required fields are marked *