Use logo.svg in place of logo.gif or logo.png?

[RoseStar]

I’m trying to use a scalable vector graphic (.svg) file in place of a .png or .gif logo. Logo.svg renders properly on the storefront but does not show in customer emails or at the top of the admin interface (where the default image was ZC’s logo.gif).

The following files were edited to display the svg file:

• /store/includes/languages/english/email_extras.php - Line # 9 : define ('EMAIL_LOGO_FILENAME', 'logo.svg'); //-File is present in /email folder
• /store/includes/languages/english/header.php - Line #27 : define('HEADER_LOGO_IMAGE', 'logo.svg');
• /store/includes/languages/english/custom_template/header.php - Line #27 : define('HEADER_LOGO_IMAGE', 'logo.svg');
• /store/admin_folder/includes/languages/english.php - Line # 19 : define('HEADER_LOGO_IMAGE', 'logo.svg');
• /store/admin_folder/includes/languages/english/email_extras.php - Line # 9 : define ('EMAIL_LOGO_FILENAME', 'logo.svg'); //-File is present in /email folder

logo.svg image is located in the following folders:

• /custom_template/images
• /custom_template/store/email
• /store/admin_folder/images

In Configuration > Images, I’ve toggled the true/false values for Calculate Image Size and Image Required but the svg logo still doesn’t show in customer emails or admin interface.

What else can I do to get logo.svg to appear in customer emails and the admin interface? Thanks in advance.

ZC 1.5.7
All bugfixes applied to date (#1 – 12)
responsive_classic template clone (via clone template 1.2.1)
one page checkout 2.3.4
local sales tax 2.5.3a
sales report 3.3.3
automatic login remember me 2.0.1

[mc12345678]

At least one change needed is in: admin/.htaccess. The list of allowed extensions needs to include svg changing:
[code]<FilesMatch "(?i).*\.(php|js|css|html?|ico|otf|jpe?g|gif|webp|png|swf|flv|xml|xsl|csv|txt)$" >[code]
To something like:

<FilesMatch "(?i).*\.(php|js|css|html?|ico|otf|jpe?g|gif|webp|png|svg|swf|flv|xml|xsl|csv|txt)$">

Honestly this seems as if it should already be there because later in the file svg extensions are included in the cache control.
Not sure if that would resolve the email issue, but there may be a similar need in that path as well.

[carlwhat]

I’m trying to use a scalable vector graphic (.svg) file in place of a .png or .gif logo. Logo.svg renders properly on the storefront but does not show in customer emails or at the top of the admin interface (where the default image was ZC’s logo.gif).

The following files were edited to display the svg file:

• /store/includes/languages/english/email_extras.php - Line # 9 : define ('EMAIL_LOGO_FILENAME', 'logo.svg'); //-File is present in /email folder
• /store/includes/languages/english/header.php - Line #27 : define('HEADER_LOGO_IMAGE', 'logo.svg');
• /store/includes/languages/english/custom_template/header.php - Line #27 : define('HEADER_LOGO_IMAGE', 'logo.svg');
• /store/admin_folder/includes/languages/english.php - Line # 19 : define('HEADER_LOGO_IMAGE', 'logo.svg');
• /store/admin_folder/includes/languages/english/email_extras.php - Line # 9 : define ('EMAIL_LOGO_FILENAME', 'logo.svg'); //-File is present in /email folder

logo.svg image is located in the following folders:

• /custom_template/images
• /custom_template/store/email
• /store/admin_folder/images

In Configuration > Images, I’ve toggled the true/false values for Calculate Image Size and Image Required but the svg logo still doesn’t show in customer emails or admin interface.

What else can I do to get logo.svg to appear in customer emails and the admin interface? Thanks in advance.

ZC 1.5.7
All bugfixes applied to date (#1 – 12)
responsive_classic template clone (via clone template 1.2.1)
one page checkout 2.3.4
local sales tax 2.5.3a
sales report 3.3.3
automatic login remember me 2.0.1

if you look here:
includes/functions/functions_email.php:522:

$block['EMAIL_LOGO_FILE'] = $domain . DIR_WS_CATALOG . 'email/' . EMAIL_LOGO_FILENAME; 

i do not see you mentioning putting the file there (as bolded above).

it looks to be needed here:

store/email/logo.svg

best.

[davewest]

I’m trying to use a scalable vector graphic (.svg) file in place of a .png or .gif logo. Logo.svg renders properly on the storefront but does not show in customer emails or at the top of the admin interface (where the default image was ZC’s logo.gif).

Nice... one thing to consider, SVG's are not the standard image and behave entirely different! They are a pain to size, but once you understand viewbox, not to hard to do. To view it simply... the follow image is from FontAwesome svg icon of airbnb...

<svg  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path  d="M224 373.12c-25.24-31.67-40.08-59.43-45-83.18-22.55-88 112.61-88  90.06 0-5.45 24.25-20.29 52-45 83.18zm138.15 73.23c-42.06  18.31-83.67-10.88-119.3-50.47 103.9-130.07 46.11-200-18.85-200-54.92  0-85.16 46.51-73.28 100.5 6.93 29.19 25.23 62.39 54.43 99.5-32.53  36.05-60.55 52.69-85.15 54.92-50 7.43-89.11-41.06-71.3-91.09 15.1-39.16  111.72-231.18 115.87-241.56 15.75-30.07 25.56-57.4 59.38-57.4 32.34 0  43.4 25.94 60.37 59.87 36 70.62 89.35 177.48 114.84 239.09 13.17  33.07-1.37 71.29-37.01 86.64zm47-136.12C280.27 35.93 273.13 32 224  32c-45.52 0-64.87 31.67-84.66 72.79C33.18 317.1 22.89 347.19 22  349.81-3.22 419.14 48.74 480 111.63 480c21.71 0 60.61-6.06 112.37-62.4  58.68 63.78 101.26 62.4 112.37 62.4 62.89.05 114.85-60.86  89.61-130.19.02-3.89-16.82-38.9-16.82-39.58z"/></svg>

As you can see, this is not your standard big byte/little byte image data.. Also the viewbox would fill up your screen.

So to use this as an logo...

<div  id="logo"><?php echo '<a href="' . HTTP_SERVER .  DIR_WS_CATALOG . '"><svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 448 512"><path d="M224  373.12c-25.24-31.67-40.08-59.43-45-83.18-22.55-88 112.61-88 90.06 0-5.45  24.25-20.29 52-45 83.18zm138.15 73.23c-42.06  18.31-83.67-10.88-119.3-50.47 103.9-130.07 46.11-200-18.85-200-54.92  0-85.16 46.51-73.28 100.5 6.93 29.19 25.23 62.39 54.43 99.5-32.53  36.05-60.55 52.69-85.15 54.92-50 7.43-89.11-41.06-71.3-91.09 15.1-39.16  111.72-231.18 115.87-241.56 15.75-30.07 25.56-57.4 59.38-57.4 32.34 0  43.4 25.94 60.37 59.87 36 70.62 89.35 177.48 114.84 239.09 13.17  33.07-1.37 71.29-37.01 86.64zm47-136.12C280.27 35.93 273.13 32 224  32c-45.52 0-64.87 31.67-84.66 72.79C33.18 317.1 22.89 347.19 22  349.81-3.22 419.14 48.74 480 111.63 480c21.71 0 60.61-6.06 112.37-62.4  58.68 63.78 101.26 62.4 112.37 62.4 62.89.05 114.85-60.86  89.61-130.19.02-3.89-16.82-38.9-16.82-39.58z"/></svg></a>';  ?>

it has to be hard codded into a page or used in css as I do.

Search online for instructions... but in short, the zen_image( well fail to render svg's... And... images like png, jpg can be responsive if you size by percentage width or height, but not both at the same time...

[DrByte]

The most important thing to note about HTML-formatted email is that most email clients have very poor support for modern technologies.
Don't count on every recipient's email software being able to understand SVG let alone display it correctly.
Are you sure that all the people receiving your emails are using ultra-modern email software?

At this present time I'd strongly advise using PNG or JPG for emails, and avoid SVG.


Related:
https://css-tricks.com/a-guide-on-svg-support-in-email/

[RoseStar]

Excellent, the .htaccess change was quick and I'm taking the advice to not rely on email clients to render .svg files. I'll use .png for customer emails.

Thanks all.

[swguy]

Remember too that images in emails are heavily cached. It's sometimes easier just to change the filename (and update the includes/languages/english/email_extras.php files in storefront and admin) to be 100% sure the new file is being used.