Scale inline SVG images inside HTML documents

zac Leave a comment

Let’s say your designer created a beautiful SVG vector image that you want to be able to use inline in your HTML – but it’s the wrong size for where you want to use it on the page. Perhaps you need to scale it down (or up!). Here’s the easiest, fastest way to do so – without using CSS:

First, make sure your SVG uses width, height and viewBox parameters:

<svg xmlns="http://www.w3.org/2000/svg" width="116" height="184" viewBox="0 0 116 184" version="1.2">

If you don’t have a viewBox, you can add one like the example above – set the value as 0 0 width height, with all values in pixels. Similarly, if you don’t have width or height – create it from the viewBox.

Next, work out what the revised width and height of the scaled image are. An easy option for this is the Image resizing and aspect ratio calculator over at Red Route – just remember to round any decimal places in the new width and height values.

Finally – update the width and height parameters, leave the viewBox parameter at the original values, and add a preserveAspectRatio parameter – per the following example:

<svg xmlns="http://www.w3.org/2000/svg" width="25" height="40" viewBox="0 0 116 184" preserveAspectRatio="xMidYMid" version="1.2">

More documentation on the preserveAspectRatio parameter is available at MDN Web Docs.

That’s it!

Create a symbolic link in Linux using the ‘ln -s’ command

zac

Writing this mostly because it’s just about impossible to find a simple answer to the question of “how to create a symbolic link” in Google without wading through page after page of ads. Yes, I know I’m being a hypocrite as I’ve got ads as well – but the placement and number are hopefully less offensive!

Command Syntax

If you need one file to be available in multiple locations in Linux, you can create a symbolic link to make this happen. The command syntax is:

ln -s {actual file location} {symbolic link location}

Example

After managing to hose my Node.js install for Homebridge again, I decided the quickest fix would be to just install Node.js directly from the system package manager. Once installed, I figured I could convince Homebridge to use the system version of Node.js, rather than having its own.

First, I deleted the broken built-in Node executable: sudo rm /opt/homebridge/bin/node

Then I installed the system version of Node.js, which places the Node executable at: /usr/bin/node

Because Homebridge expects the Node executable to be available at the original location, I needed to create a link from the system version to the location it wanted:

sudo ln -s /usr/bin/node /opt/homebridge/bin/node

(To get it working I had to change ownership of the symbolic link to the Homebridge user, but that’s a topic for another post!)

Move WooCommerce Coupon Code on the Checkout Page

zac

For WooCommerce stores that offer coupons to their customers, there could be a problem with the location of the coupon code box on the checkout page. It’s hiding down the bottom of the page, and helpfully – it’s not visible by default. This can lead to lost orders, or customers emailing in for help – not an ideal situation!

When researching this problem, I couldn’t find any good (free) WordPress or WooCommerce plugins that provided a fix. There are a few code fixes that are out there, but they’re mostly quite complicated and prone to doing weird stuff in the UI. 🙁

The solution is very simple – it requires a bit of additional code in the current themes’ functions.php file. What the code below does is use a bit of simple JavaScript that moves the original coupon code section to a better location, then expands the box so it’s always displayed:

/**
 * Move coupon block to before payment block on checkout page
 * Set coupon code box to display by default (needs a short delay)
 */
add_action( 'woocommerce_before_checkout_form', 'move_checkout_coupon_form', 5 );
function move_checkout_coupon_form() {
  if ( is_checkout() && ! is_wc_endpoint_url() ) :
  ?>
  <script type="text/javascript">
    document.addEventListener("DOMContentLoaded", function(event) {
      let coupon = document.querySelector('section.coupon-wrapper');
      let payment = document.querySelector('div#payment');
      let parent = document.querySelector('div#order_review');
      parent.insertBefore(coupon, payment);
      setTimeout(function () {
        document.querySelector('form.checkout_coupon.woocommerce-form-coupon').style.display = 'block';
        document.querySelector('form.checkout_coupon.woocommerce-form-coupon').style.width = '100%';
      }, 10);
    });		
  </script>
  <?php
  endif;
}

For custom checkout pages, some of the JavaScript selectors may need a couple adjustments. Then again, if it’s custom – the coupon box is probably already in a better spot!