Forum

Thread tagged as: Problem

SVG's in assets

Hi Guys,

Just a heads up on this. When I uploaded two SVG logos into my assets folder today they show like this in the backend.
https://cl.ly/2p2e3y3W2V38

But when they are used they actually appear fine and 'normal' as they should do on the actual web page. Just the backend shows them like this. But to a user/client, they might think the images are wrong/broken. Just thought I would flag it up to you as I spotted it.

Thanks, Terry
Terry Upton

Terry Upton 0 points

  • 5 years ago
Drew McLellan

Drew McLellan 2638 points
Perch Support

5 years ago

What's wrong with them?
Terry Upton

Terry Upton 0 points

5 years ago

This is what they look like in the assets panel;
https://cl.ly/2p2e3y3W2V38

This is what they actually/should look like;
https://cl.ly/3z462f3r0l0o
https://cl.ly/1B2v291C0d1h

The wording on them has got distorted in the backend system view/version.
Drew McLellan

Drew McLellan 2638 points
Perch Support

5 years ago

Ok - we're just showing your SVGs. We don't do anything to them.
Terry Upton

Terry Upton 0 points

5 years ago

Ok thanks Drew.
But you turn them into PNG files for the asset thumbnails. They are fine on the front-end website when these assets are selected in perch to be used? It is just the assets thumbs that look like this. So guessing either an issue with the SVG when it is run through the process of capturing a thumbnail or something?

It's not a concern to me necessarily. I thought I would just raise it as I noticed it and could be a potential issue/bug, or others might have issues.

Thanks.
Drew McLellan

Drew McLellan 2638 points
Perch Support

5 years ago

We don't thumbnail them - they're just your SVGs. We don't need to thumbnail SVGs as they're scaleable.
Terry Upton

Terry Upton 0 points

5 years ago

When I right click and inspect the file in the assets panel and on the page it says that the thumbnail is a PNG file?
See here https://cl.ly/0I2m1F0Z323g and here https://cl.ly/2G1U0l0z1V25
Drew McLellan

Drew McLellan 2638 points
Perch Support

5 years ago

Are you treating it as an image or as a file?
Terry Upton

Terry Upton 0 points

5 years ago

As an image.
Drew McLellan

Drew McLellan 2638 points
Perch Support

5 years ago

How are you uploading them? Perch basically doesn't have any capability to render SVG to PNG, so I'm completely perplexed.
Terry Upton

Terry Upton 0 points

5 years ago

My process is this;
Click the 'Select or upload an image' in the template
Then select add asset button
Then I drag the SVG file into the 'Drop files here or click to upload' area and then it uploads and I can see that the PNG thumb is generated and I choose this from the asset area and then click the use selected.

I can see when I upload that the PNG is generated in the thumbs and this is then used on the template in the image block too.

Here are my templates if it helps;

post.html  
<article class="main-copy">
    <header>
        <p  class="entry-published date">Posted on <time datetime="<perch:blog id="postDateTime" type="date" label="Date" time="local" format="%Y-%m-%d" order="3" />"><perch:blog id="postDateTime" format="%d %B %Y" /></time></p>
        <h1><perch:blog id="postTitle" type="text" required="true" size="xl autowidth" label="Title" order="1"  /></h1>
    </header>

    <perch:template path="content/blocks-blog/image.html"/>

    <perch:blog id="postDescHTML" type="textarea" label="Article Content" encode="false" editor="markitup" markdown="true" html="true" size="xxl" required="false" bucket="news" imagewidth="795" order="4" divider-after="Image" />


<perch:blog id="excerpt" type="textarea" label="Excerpt" textile="false" order="2" suppress="true" size="s" />


<perch:blocks>
    <perch:block type="image" label="Image">
        <perch:template path="content/blocks-blog/image.html" rescope="parent" />
    </perch:block>

    <perch:block type="download" label="Download">
        <perch:template path="content/file_pdf.html" rescope="parent" />
    </perch:block>

    <perch:block type="text" label="Text">
        <perch:template path="content/text_block.html" rescope="parent" />
    </perch:block>

    <perch:block type="quote" label="Quote">
        <perch:template path="content/block_quote.html" rescope="parent" />
    </perch:block>
</perch:blocks>
</article>

<perch:blog id="album" type="albumlist" label="Choose a Gallery" suppress="true" divider-before="Related Gallery"  divider-after="Meta Data" />






<perch:categories id="categories" set="blog" label="Categories" display-as="checkboxes">
    <perch:category id="catTitle" type="text" suppress="true" />
</perch:categories>

<perch:noresults>
    <script>
        window.location= "/404/"
    </script>
</perch:noresults>

image.html  
<perch:blog
    id="img-content"
    type="radio"
    label="Image Shape"
    options="None| , Landscape or Sqaure|img-content, Portrait|img-content-portrait"
    suppress="true"
    order="33"
    divider-before="Image Classes"
/>

<perch:blog
    id="img-position"
    type="radio"
    label="Image Alignment"
    options="None| , Right|img-right, Left|img-left, Center|center"
    suppress="true"
    order="34"
/>

<perch:blog
id="img-border"
type="checkbox"
label="Image Border"
value="border"
suppress="true"
order="35"
/>

<p>
<perch:if exists="imageLink">
    <a href="<perch:blog
                id="imageLink"
                type="text"
                label="Link"
                help="Add URL if you want to link the image"
                order="33"
            />">
</perch:if>
    <img src="<perch:blog id="image" type="image" width="485" height="525" crop="false" label="Image" bucket="news" order="5" />" alt="<perch:content id="alt" type="text" label="Image Description" required="true" title="true" order="6" />" class="<perch:blog id="img-content" /> <perch:blog id="img-position" /> <perch:blog id="img-border" />" />
<perch:if exists="imageLink">
    </a>
</perch:if>
</p>

<perch:blog id="image" type="image" width="120" height="120" crop="true" quality="95" suppress="true" />

Would a quickCast video of the process help?
Just to confirm it is standard Perch and I am on the latest version.

Thanks.
Drew McLellan

Drew McLellan 2638 points
Perch Support

5 years ago

Could you post your diagnostics report?

Perch has no code to generate a PNG from an SVG so I need to figure out what's happening.
Terry Upton

Terry Upton 0 points

5 years ago 
PERCH INFORMATION

Perch: 2.8.25
Production mode: Production (100)
Installed apps: content (2.8.25), assets (2.8.25), categories (2.8.25), perch_blog (5.0), perch_gallery (2.8.6)
DB driver: PDO
DB tables: perch2_blog_authors (2), perch2_blog_categories (3), perch2_blog_comments (0), perch2_blog_index (2645), perch2_blog_posts (86), perch2_blog_posts_to_categories (71), perch2_blog_posts_to_tags (13), perch2_blog_sections (2), perch2_blog_tags (4), perch2_blogs (1), perch2_categories (13), perch2_category_counts (3), perch2_category_sets (2), perch2_content_index (10961), perch2_content_items (2316), perch2_content_regions (270), perch2_gallery_albums (14), perch2_gallery_image_versions (685), perch2_gallery_images (131), perch2_navigation (0), perch2_navigation_pages (0), perch2_page_templates (6), perch2_pages (67), perch2_resource_log (2083), perch2_resource_tags (1), perch2_resources (1159), perch2_resources_to_tags (1), perch2_settings (41), perch2_user_passwords (0), perch2_user_privileges (40), perch2_user_role_privileges (17), perch2_user_roles (3), perch2_users (2)
Users: 2
App runtimes:
<?php
    $apps_list = array(
        'content',
        'categories',
        'perch_blog',
        'perch_gallery',
    );
Scheduled tasks for perch_blog: delete_spam_comments (1440 mins)
Editor plug-ins: markitup
H1: ae7f2c019b094237eedda59980985f2d
L1: e3ccc6e3c6b9b672595ab99036c4b52c
F1: dc1fef2ad0fcd9f943c02ebb43d85dbc
headerColour: #fc5d20
content_singlePageEdit: 1
helpURL:
siteURL: /
hideBranding: 1
content_collapseList: 0
lang: en-gb
update_2.4.4: done
on_sale_version: 2.8.25
perch_blog_post_url: /news/{postSlug}
perch_blog_update: 5.0.1
headerScheme: dark
perch_blog_slug_format: %Y-%m-%d-{postTitle}
perch_blog_akismet_key:
perch_blog_max_spam_days: 7
dashboard: 1
content_hideNonEditableRegions: 0
content_frontend_edit: 0
perch_blog_comment_notify: 0
update_2.4.5: done
perch_gallery_update: 2.8.5
perch_gallery_bucket_mode: single
perch_gallery_bucket: gallery
perch_gallery_basicUpload: 0
update_2.4.6: done
update_2.4.7: done
update_2.4.9: done
hide_pwd_reset: 0
logoPath: /assets/resources/logo-amasci-perch-orange.png
update_2.5.4: done
update_2.6.3: done
update_2.7.9: done
update_2.7.10: done
update_2.8.6: done
update_2.8.8: done
latest_version: 2.8.15
update_2.8.10: done
update_2.8.14: done
update_2.8.15: done
update_2.8.18: done
update_2.8.25: done
PERCH_DEVELOPMENT: 10
PERCH_STAGING: 50
PERCH_PRODUCTION: 100
PERCH_DB_USERNAME: plowmancraven-db
PERCH_DB_DATABASE: plowmancraven
PERCH_RESFILEPATH: /home/plowmancraven/public_html/assets/resources
PERCH_DB_SERVER: localhost
PERCH_DB_PREFIX: perch2_
PERCH_RESPATH: /assets/resources
PERCH_TZ: Europe/London
PERCH_EMAIL_FROM: terry@amasci.co.uk
PERCH_EMAIL_FROM_NAME: Terry Upton
PERCH_LOGINPATH: /cms
PERCH_CLEAN_RESOURCES: 1
PERCH_PATH: /home/plowmancraven/public_html/cms
PERCH_CORE: /home/plowmancraven/public_html/cms/core
PERCH_HTML5: 1
PERCH_RWD: 1
PERCH_UNDO_BUFFER: 3
PERCH_RUNWAY:
PERCH_ERROR_MODE: DIE
PERCH_DATE_LONG: %d %B %Y
PERCH_DATE_SHORT: %d %b %Y
PERCH_TIME_SHORT: %H:%M
PERCH_TIME_LONG: %H:%M:%S
PERCH_RUNWAY_ROUTED:
PERCH_STRONG_PASSWORDS:
PERCH_DEBUG:
PERCH_PREVIEW_ARG: preview
PERCH_TEMPLATE_PATH: /home/plowmancraven/public_html/cms/templates
PERCH_DEFAULT_DOC: index.php
PERCH_DEFAULT_EXT: .php
PERCH_PRODUCTION_MODE: 100
PERCH_HTML_ENTITIES:
PERCH_SSL:
PERCH_STRIPSLASHES:
PERCH_PROGRESSIVE_FLUSH: 1
PERCH_AUTH_PLUGIN:
PERCH_DB_CHARSET: utf8
PERCH_DB_PORT:
PERCH_DB_SOCKET:
PERCH_SESSION_TIMEOUT_MINS: 20
HOSTING SETTINGS

PHP: 5.4.41
Zend: 2.4.0
OS: Linux
SAPI: cgi-fcgi
Safe mode: not detected
MySQL client: mysqlnd 5.0.10 - 20111026 - $Id: c85105d7c6f7d70d609bb4c000257868a40840ab $
MySQL server: 5.5.48-cll
Free disk space: 322.65 GB
Extensions: Core, date, ereg, libxml, openssl, pcre, sqlite3, zlib, bcmath, calendar, ctype, curl, dom, hash, fileinfo, filter, ftp, gd, SPL, iconv, session, json, mbstring, mcrypt, standard, mysql, mysqli, mysqlnd, Phar, posix, Reflection, imap, SimpleXML, soap, sockets, exif, tokenizer, xml, xmlreader, xmlwriter, zip, cgi-fcgi, PDO, pdo_sqlite, raphf, propro, http, imagick, pdo_mysql, ionCube Loader, Zend Guard Loader
GD: Yes
ImageMagick: Yes
PHP max upload size: 100M
PHP max form post size: 110M
PHP memory limit: 250M
Total max uploadable file size: 100M
Resource folder writeable: Yes
Session timeout: 24 minutes
Native JSON: Yes
Filter functions: Yes
Transliteration functions: No
DOCUMENT_ROOT: /home/plowmancraven/public_html
GATEWAY_INTERFACE: CGI/1.1
HTTP_ACCEPT: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
HTTP_ACCEPT_ENCODING: gzip, deflate, sdch
HTTP_ACCEPT_LANGUAGE: en-GB,en-US;q=0.8,en;q=0.6
HTTP_CONNECTION: keep-alive
HTTP_COOKIE: __atuvc=21%7C1%2C0%7C2%2C0%7C3%2C1%7C4; _ga=GA1.3.83276427.1452169273; cmsa=1; PHPSESSID=3f6bb0ea10d3092551aa72971c99a52d
HTTP_HOST: www.plowmancraven.co.uk
HTTP_REFERER: https://www.plowmancraven.co.uk/cms/core/settings/diagnostics/
HTTP_UPGRADE_INSECURE_REQUESTS: 1
HTTP_USER_AGENT: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/48.0.2564.109 Safari/537.36
PATH: /bin:/usr/bin
QUERY_STRING: extended
REDIRECT_STATUS: 200
REMOTE_ADDR: 81.133.44.91
REMOTE_PORT: 34239
REQUEST_METHOD: GET
REQUEST_URI: /cms/core/settings/diagnostics/?extended
SCRIPT_FILENAME: /home/plowmancraven/public_html/cms/core/settings/diagnostics/index.php
SCRIPT_NAME: /cms/core/settings/diagnostics/index.php
SCRIPT_URI: https://www.plowmancraven.co.uk/cms/core/settings/diagnostics/
SCRIPT_URL: /cms/core/settings/diagnostics/
SERVER_ADDR: 217.19.241.95
SERVER_ADMIN: webmaster@plowmancraven.co.uk
SERVER_NAME: www.plowmancraven.co.uk
SERVER_PORT: 80
SERVER_PROTOCOL: HTTP/1.1
SERVER_SOFTWARE: Apache
UNIQUE_ID: VsI8N9kT8V8AAFr-x6EAAAAQ
PHP_SELF: /cms/core/settings/diagnostics/index.php
REQUEST_TIME_FLOAT: 1455569975.91
REQUEST_TIME: 1455569975
argc: 1

Could it be down to how the server is handling the MIME type for an SVG?

Will see if I can test in my local environment and see what happens.
Drew McLellan

Drew McLellan 2638 points
Perch Support

5 years ago

Possibly. If the file isn't being identified as SVG, it would then be treated as a file. You have Imagick installed, which then may be attempting to thumbnail the image in the same way it would a PDF.
Terry Upton

Terry Upton 0 points

5 years ago

Hi Drew. Did you establish anything on this? As to why SVG images haver PNG thumbs created? I have a load of SVGS to add to a site but their thumbnails all look incorrect, but the SVGS are fine on the end webpage. It is mainly when they have been optimised by SVGO I believe the PNG's go a little wrong.

PNG thumbnail asset generated in Perch
https://cl.ly/1429232f0W2W

Actual SVG rendered on page
https://cl.ly/2t2H2q0s1Q3a

Thanks Terry
Drew McLellan

Drew McLellan 2638 points
Perch Support

5 years ago

No, this isn't something we've seen anywhere else.
Terry Upton

Terry Upton 0 points

5 years ago

Any ideas what it might be related to Drew so I can try and investigate and resolve? Likely to be a server config or something? I am developing locally. I will test shortly on the live site to see.
Drew McLellan

Drew McLellan 2638 points
Perch Support

5 years ago

Did you investigate the mime issue?
Terry Upton

Terry Upton 0 points

5 years ago

What should the MIME type be? Looking at my config that this gets set in my virtualhosts file on my server and I add this in locally to my htaccess for local dev only.

  AddType     image/svg+xml                     svg svgz
  AddEncoding gzip                                   svgz
Terry Upton

Terry Upton 0 points

5 years ago

So some further digging and testing, it has revealed that the following must be present within an SVG image file for the server/Perch to realise it as an SVG file.

<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "https://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

When I exported from Illustrator this was not included. Instead my document started with

<svg xmlns="https://www.w3.org/2000/svg"

Not sure if this is correct or not? But that's what I have found out. In fact having tested further it seems SVGO also removes this code too. So I am not sure where to go from here...?

Thanks, Terry
Terry Upton

Terry Upton 0 points

5 years ago

Upon checking my original files though these are being set to image/svg+xml. If you see: https://www.grommets.co.uk/cms/resources/measuring-guide/open-grommet-with-labels.svg - so not sure where the problem lies? With Perch or my Server/Setup?

Would you like to test with some of my files at all Drew?

Thanks.