Web-Design

Fancy SVGs

/ by Karsten Reincke | Leave a comment

fancy curved staircase

Fan­cy bitmaps are the one thing, scal­able pic­tures the oth­er. Word­Press does not like Scal­able Vec­tor Graph­ics by default: SVGs con­sist of XML code. If loaded, it can — at least in prin­ci­ple — inject mali­cious code into the sys­tem. Using SVGs in tem­plates, how­ev­er, is not pre­vent­ed by Word­Press. On HTML lev­el, they can be embed­ded — as usu­al — in img tags. That’s the way, also bootScore inte­grates the logos into the file header.php. But for the ambi­tious bootScore user, Fan­cy SVGs need more:

The svg tag is used to embed the SVG-code itself into a page.1 But for using SVGs in the media library and putting them into an img tag, she needs a plu­g­in like SVG Sup­port, WebP SVG Sup­port or Save SVG:

[ en | de ]

Solution

  • Install the plu­g­in Safe SVG
  • Load your SVG into your media library.
  • Use it, like ‘nor­mal’ images.2

Background

The Word­Press plu­g­in SVG-Sup­port promis­es to ‘san­i­tize’ the XML code on upload, is active­ly main­tained, and is licensed under GPL‑2.0‑or-later . This also applies to the plu­g­in Safe SVG.3

WebP SVG Sup­port — on the oth­er hand — says noth­ing about san­i­tiz­ing the code. But it men­tions the media library. Also, Safe SVG pro­motes itself by its use of the Word­Press Media Library, Hence, I pre­fer to install the plu­g­in Safe SVG.

Because Word­Press enables the devel­op­ers to incor­po­rate vec­tor and raster graph­ics by the same tech­nique, we can use our Short­Code for ‘Fan­cy Images’ for SVGs as well:

cc-by-sa-logo

Nev­er­the­less, I would like to use the CC-BY-SA logo in the foot­er as part of a line: cc-by-sa-logo. There­fore, I need a sec­ond ver­sion of that func­tion:

/*
 * Simple short code for inserting an inline img 
 * (C) 2023 Karsten Reincke
 * SPDX-License-Identifier: MIT
 */
function fciPicCode($atts){
  $atts = (array) $atts;
  $imid = $atts[0];   // obligatoric parameter
  $width = $atts[1];  // obligatoric parameter
  $wpsize = "";       // thumbnail, medium, large, or full
  $alt="";                    // optional parameter
  $style="is-style-default";  // optional parameter 

  /* IDEA: try to download the best fitting image size be default.
   * Download the full sized image if and when the user had said
   * she wants to see it by a click (fancy)
   */
  if ($width <= 150)
    $wpsize = "thumbnail";
  elseif ($width <=300)
    $wpsize = "medium";
  elseif ($width <= 1024)
    $wpsize = "large";
  else
    $wpsize = "full";

  /* get the path to the original image */
  $fimgp=wp_get_attachment_image_url($imid,"full");
  if (!($fimgp)) return ("wrong image data");
  /* if it's an svg, there won't be any smaller images */
  if (wp_get_image_mime($fimgp) == "svg" )
    $simgp=$fimgp;
  else {
  /* otherwise get the path to the fitting smaller image */
    $simgp=wp_get_attachment_image_url($imid,$wpsize);
    if (!($simgp)) $simgp=$fimgp;
  }

  if (array_key_exists(2,$atts)) {
    $alt=$atts[2];
    if (array_key_exists(3,$atts)) {
      $style=$atts[3];
    }
  }

  $res= 
     '<a href="' . $fimgp . '" data-fancybox="">' .
      '<img src="' . $simgp . '" alt="'. $alt .'" width="' . $width . '" >' .
     '</a>' ; 
  return $res;


}
add_shortcode('fcipic', 'fciPicCode');

And how does this … Menu

… sup­port our migra­tion to bootScore? Well, once a web design­er has tak­en the first gen­er­al steps and has checked SEO, she will soon turn to a real­ly thick board, her prop­er­ly clus­tered and pre­sent­ed menu with­out get­ting too fan­cy. Even­tu­al­ly, she is going to spruce and speed up the dis­play of fixed and scal­able images. This post talks about a part of this way.

  1. see W3C-Schools [↩]
  2. Word­Press embeds it via an IMG tag [↩]
  3. For code san­i­ti­za­tion, see descrip­tion, for licens­ing the file readme.txt. [↩]
To top