SVG not showing on website

[garry rigby]

The SVG I made and exported from Photo 2 does not show when I embed it on the page. It uploads to my wordpress site and can be seen in media files. It also shows if I open it in Safari

logo2.svg

[David in Яuislip]

Works locally here with <img src="logo2.svg">, no idea about Wordpress
You could try deleting the first two lines

[v_kyr]

Security reasons, you have to add and enable SVG support in WP!

• Either use some WP Plugin like „SVG Support“ or „Safe SVG“.
• Or alternatively try to allow and enable SVG support in functions.php via ...
   

  Quote

  /**
  * Add SVG to allowed file uploads
  **/
  function add_file_types_to_uploads($file_types){
  
  $new_filetypes = array();
  $new_filetypes['svg'] = 'image/svg+xml';
  $file_types = array_merge($file_types, $new_filetypes );
  
  return $file_types;
  }
  add_action('upload_mimes', 'add_file_types_to_uploads'); 
  

  ... OR ...

   /**
   * Add svg support
   **/
  add_filter( 'wp_check_filetype_and_ext', function( $data, $file, $filename, $mimes) {
        global $wp_version;
        if( $wp_version == '4.7' || ( (float) $wp_version < 4.7 ) ) {
        return $data;
      }
      $filetype = wp_check_filetype( $filename, $mimes );
        return [
        'ext'             => $filetype['ext'],
        'type'            => $filetype['type'],
        'proper_filename' => $data['proper_filename']
      ];
  }, 10, 4 );
  
  function dl_mime_types( $mimes ){
     $mimes['svg'] = 'image/svg+xml';
     return $mimes;
  }
  add_filter( 'upload_mimes', 'dl_mime_types' );
  
  function dl_fix_svg() {
    echo '<style type="text/css">.attachment-266x266, .thumbnail img { width: 100% !important; height: auto !important;} </style>';
  }
  add_action( 'admin_head', 'dl_fix_svg' );
  

   

[garry rigby]

Hi, yes I have already added code to function page. An SVG I made in adobe illustrator works fine

[v_kyr]

8 minutes ago, garry rigby said:

Hi, yes I have already added code to function page. An SVG I made in adobe illustrator works fine

Check/test it with a SVG Sanitizer and try out any of the cleaned code instead. - The Safe SVG Plugin does the same internally ...

• https://wordpress.org/plugins/safe-svg/

So when in trouble try that one!

[David in Яuislip]

Does Wordpress accept width="100%" height="100%" ?

Try the attached file, I've changed those values to match the viewbox
Also cleaned up the text, there was a nasty gap between the S & T
I've also changed STUCCCO to STUCCO
<hint>
Use these options

</hint>

logo2a.svg

[garry rigby]

Thank you but that made no difference. It must be my export setting from Affinity Photo 2 as any SVG I made in adobe illustrator works fine

[v_kyr]

Just now, David in Яuislip said:

Does Wordpress accept width="100%" height="100%" ?

The OP has to test, I don't use/run WP as there are other, better and more secure CMS systems.

[garry rigby]

8 minutes ago, David in Яuislip said:

Does Wordpress accept width="100%" height="100%" ?

Try the attached file, I've changed those values to match the viewbox
Also cleaned up the text, there was a nasty gap between the S & T
I've also changed STUCCCO to STUCCO
<hint>
Use these options

</hint>

logo2a.svg 368 B · 1 download

Thanks. It does not allow me to upload your file logo2a.svg - which is odd as it uploads other SVG's

[David in Яuislip]

4 minutes ago, v_kyr said:

The OP has to test, I don't use/run WP as there are other, better and more secure CMS systems.

Indeed, I only write plain HTML and I never use Affinity for serious svg's

[v_kyr]

12 minutes ago, garry rigby said:

Thank you but that made no difference.

Just for fun check if the font setting & usage might make trouble here for WP too, thus instead convert the used Logo text to curves in ADe, export as SVG and retry!

[garry rigby]

1 minute ago, garry rigby said:

Thanks. It does not allow me to upload your file logo2a.svg - which is odd as it uploads other SVG's

 

Just now, v_kyr said:

Just for fun check if the font setting & usage might make trouble here for WP too, thus instead convert the used Logo text to curves, export and retry!

Haha - cool. It works with rasterise to everything and export text curves - thanks for all your help - have a good 1

[garry rigby]

7 minutes ago, David in Яuislip said:

Indeed, I only write plain HTML and I never use Affinity for serious svg's

It works with rasterise to everything and export text curves - thanks very much for all your help

[v_kyr]

18 minutes ago, garry rigby said:

It works with rasterise to everything

Well we don't want any rasterization (pixels/bitmap), we want plain vectors, thus apply just for the selected text layers from the top menu "Layer -> Convert to curves" and export as SVG in a manner that "no rasterization takes place" is shown! - Since you want to have a scalable vector representation and not embedded base64 uuencoded image data (aka pixel/bitmap data). - Check that your final SVG logo contains just vectors and no bitmap based "image" code!

• logo2_test.svg

[garry rigby]

6 minutes ago, v_kyr said:

Well we don't want any rasterization (pixels/bitmap), we want plain vectors, thus apply just for the selected text layers from the top menu "Layer -> Convert to curves" and export as SVG in a manner that "no rasterization takes place" is shown!

• logo2_test.svg

oh yeah damn! I exported with text as curves and it works great. thanks again https://www.caracampbell.co.uk/home2/

[v_kyr]

20 minutes ago, garry rigby said:

oh yeah damn! I exported with text as curves and it works great.

Looks to be Ok, also contents wise for the SVG XML code itself here (...it's all vectors).

[garry rigby]

5 minutes ago, v_kyr said:

Looks to be Ok, also contents wise for the SVG XML code itself here.

thanks again for your help

[v_kyr]

Just now, garry rigby said:

thanks again for your help

No problem, you're welcome!