CODEWITHSUNDEEP
javascripthtmlcsssvgformatting
La1sum
La1sum

Reputation: 21

SVG images formatting issues in CSS

I'm trying to achieve a similar effect to Lando Norris' website where his achievements scroll horizontally. I tried recreating that by creating svg images and then formatting them with the help of css. It doesn't seem to work on most web browsers though. Should I change my approach at recreating this horizontal banner or is there a way to make the images display properly?

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>PawelosFPV achievements</title>
  <link href="https://fonts.googleapis.com/css?family=Baloo+Tamma|PT+Sans" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
  <style>
    *,
    *::before,
    *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      position: relative;
    }
    
    :root {
      font-family: "PT Sans", sans-serif;
      font-size: 20px;
    }
    
    body {
      background-color: #EFF1ED;
      min-height: 100vh;
    }
    
    h1 {
      color: #161032;
      font-family: "Baloo Tamma", sans-serif;
      font-size: 1.5rem;
    }
    
    h1::after {
      background-color: #00A8E8;
      bottom: 0;
      content: "";
      display: block;
      height: 0.25rem;
      position: absolute;
      width: 1rem;
    }
    
    p {
      color: rgba(0, 0, 0, 0.8);
    }
    
    .container {
      margin: 0 auto 2rem;
      max-width: 900px;
      padding: 0 1.5rem;
    }
    
    .sample-item {
      width: auto;
      height: 125px;
      vertical-align: middle;
      padding-right: 20px;
    }
    
    .horizontal-scrolling-banner {
      overflow: hidden;
    }
    
    .horizontal-scrolling-banner__helper-wrapper {
      align-items: center;
      display: flex;
      left: 0;
      transform: translateZ(0);
      transition-property: left;
      transition-timing-function: linear;
    }
  </style>

</head>

<body>
  <!-- partial:index.partial.html -->
  <div class="container">

  </div>

  <div class="horizontal-scrolling-banner">
    <img src="http://pawelosfpv.com/wp-content/uploads/2022/05/FAI-World-Drone-Cup-Riga-2018.svg" class="sample-item">
    <img src="http://pawelosfpv.com/wp-content/uploads/2022/05/FAI-World-Drone-Cup-Modena-2018.svg" class="sample-item">
    <img src="http://pawelosfpv.com/wp-content/uploads/2022/05/Sumo-Challange-2018.svg" class="sample-item">
    <img src="http://pawelosfpv.com/wp-content/uploads/2022/05/Polish-Junior-Championship-2019.svg" class="sample-item">
    <img src="http://pawelosfpv.com/wp-content/uploads/2022/05/Polish-Championship-2019-V2.svg" class="sample-item">
    <img src="http://pawelosfpv.com/wp-content/uploads/2022/05/Drone-Champions-League-2019.svg" class="sample-item">
    <img src="http://pawelosfpv.com/wp-content/uploads/2022/05/DCL-Salina-Turda-2019.svg" class="sample-item">
    <img src="http://pawelosfpv.com/wp-content/uploads/2022/05/DCL-VADUZ-2019.svg" class="sample-item">
    <img src="http://pawelosfpv.com/wp-content/uploads/2022/05/DCL-TURIN-2019.svg" class="sample-item">
    <img src="http://pawelosfpv.com/wp-content/uploads/2022/05/VICE-FAI-World-Cup-Ranking-2019.svg" class="sample-item">
    <img src="http://pawelosfpv.com/wp-content/uploads/2022/05/DRL-Tryouts-2019.svg" class="sample-item">
    <img src="http://pawelosfpv.com/wp-content/uploads/2022/05/DCL-Laax-2019.svg" class="sample-item">
    <img src="http://pawelosfpv.com/wp-content/uploads/2022/05/IDSC-Korea-Yeongwol.svg" class="sample-item">
    <img src="http://pawelosfpv.com/wp-content/uploads/2022/05/EPFL-FAI-2019.svg" class="sample-item">
    <img src="http://pawelosfpv.com/wp-content/uploads/2022/05/XFLY-Tianjin-2019.svg" class="sample-item">
    <img src="http://pawelosfpv.com/wp-content/uploads/2022/05/FAI-World-Drone-Cup-Partouche-2019.svg" class="sample-item">
    <img src="http://pawelosfpv.com/wp-content/uploads/2022/05/DRL-Tryouts-2020.svg" class="sample-item">
    <img src="http://pawelosfpv.com/wp-content/uploads/2022/05/Drone-Champions-League-2020.svg" class="sample-item">

  </div>
  </div>
  <!-- partial -->
  <script>
    (function horizontalScrollingBanner() {
      var banners = document.getElementsByClassName('horizontal-scrolling-banner');
      if (!banners || banners.length === 0) {
        return;
      }
      var pxPerSecond = 25;
      setUpElements();
      scrollTheBanners();
      window.addEventListener('resize', setUpElements);

      function setUpElements() {
        for (var i = 0; i < banners.length; i++) {
          var currentBanner = banners[i];
          var helperWrapperClass = 'horizontal-scrolling-banner__helper-wrapper';
          var currentHelperWrapper = currentBanner.querySelector('.' + helperWrapperClass);
          if (currentHelperWrapper) {
            var clones = currentHelperWrapper.querySelectorAll('[data-clone]');
            Array.prototype.forEach.call(clones, function(clone) {
              clone.remove();
            });
            var childrenCount = currentHelperWrapper.children.length;
            for (var i = 0; i < childrenCount; i++) {
              currentBanner.appendChild(currentHelperWrapper.children[0]);
            }
            currentHelperWrapper.remove();
          }

          var children = currentBanner.children;

          var bannerWidth = currentBanner.getBoundingClientRect().width;
          var minWidthToCoverBanner = (bannerWidth * 2) + children[0].getBoundingClientRect().width;
          var childrenWidth = Array.prototype.reduce.call(children, function(r, child) {
            return r + child.getBoundingClientRect().width;
          }, 0);
          var currentWidth = childrenWidth;


          do {
            Array.prototype.forEach.call(children, function(child) {
              var clone = child.cloneNode();
              clone.setAttribute('aria-hidden', true);
              clone.dataset.clone = true;
              currentBanner.appendChild(clone);
            });
            currentWidth += childrenWidth;
          } while (currentWidth < minWidthToCoverBanner);

          var transitionHelperWrapper = document.createElement('div');
          transitionHelperWrapper.classList.add('horizontal-scrolling-banner__helper-wrapper');
          var childrenCount = children.length;
          for (var i = 0; i < childrenCount; i++) {
            transitionHelperWrapper.appendChild(children[0]);
          }
          currentBanner.appendChild(transitionHelperWrapper);
          transitionHelperWrapper.dataset.childrenWidth = childrenWidth;
        }
      }

      function scrollTheBanners() {
        for (var i = 0; i < banners.length; i++) {
          var helperWrapper = banners[i].firstElementChild;
          var childrenWidth = helperWrapper.dataset.childrenWidth;
          var offsetLeft = helperWrapper.offsetLeft;

          if (offsetLeft <= (childrenWidth * -1)) {
            helperWrapper.style.transitionDuration = '0s';
            helperWrapper.style.left = '0px';
            helperWrapper.style.removeProperty('transition-duration');
          } else if (helperWrapper.style.left === '' || helperWrapper.style.left === '0px') {
            setTimeout(function() {
              helperWrapper.style.transitionDuration = (childrenWidth / pxPerSecond).toFixed() + 's';
              helperWrapper.style.left = (childrenWidth * -1) + 'px';
            }, 0);
          }
        }
        requestAnimationFrame(scrollTheBanners);
      }
    })();
  </script>
</body>

</html>

Upvotes: 0

Views: 62

Answers (1)

herrstrietzel
herrstrietzel

Reputation: 17155

Fonts are are not automatically embedded

Locally installed fonts used in svg are not available for users of your website/app unless they happen to have this particular font installed.

Besides firefox usually rejects local font file usage due to security policies (could be changed in settings as described here: "Custom (System installed) fonts in Firefox?")

Some options:

  • Open your svg in Illustrator and convert text to (path) outlines before saving as svg via convert text to outlines selcting all elements by CTRLa and CTRLshiftO should do the trick
  • embed the font via @font-face using a data URL. A tool like transfonter can help

You should also concider using an open source alternative to your font like the SIL OFL v1.1 licensed "D-Din" available on font squirrel

Still weird letter spacing?

Illustrator often splits text elements into seperate <text>or <tspan> elements. This is usually caused by customized spacing/kerning values.

<text class="cls-1" transform="translate(133.05 117.67)">2018</text>
<text class="cls-2" transform="translate(143.07 61.95)">1<tspan class="cls-3" x="19.99" y="0">S</tspan>
<tspan x="39.83" y="0">T</tspan>
</text><text class="cls-4" transform="translate(57.23 179.3)">SUMO CHAL<tspan class="cls-5" x="147.92" y="0">L</tspan>
<tspan x="162.25" y="0">ANGE</tspan>
</text>

Unfortunately markup will only work for this particular font. So you might need to simplify your structure like so:

<text x="50%" y="30%" text-anchor="middle" dominant-baseline="central">2022<tspan x="50%" data-dx="50%" dy="15%">1ST</tspan></text>
<text x="50%" y="90%" text-anchor="middle" dominant-baseline="central">
AWARD
</text>

Example: embedded vs not embedded font

img,
svg{
  height:200px
}
<link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@700" rel="stylesheet">

<p>Font embedded</p>
  <img src="https://svgshare.com/i/iW8.svg" class="sample-item">
<p>Font not embedded (fallback font is used)</p>
  <img src="https://svgshare.com/i/iY4.svg" class="sample-item">
  
<p>Inline SVG - using Webfont (Roboto)</p>
<svg  id="Achievement" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 185">
  <defs>
    <style>
      text {
font-family: 'Roboto Condensed', sans-serif;
        font-size: 32px;
        font-weight: bold;
      }
    </style>
  </defs>
  <path id="wreath" d="M2.4 88.7c0-0.3 8.9 0.8 20.8 12.8a58.6 58.6 0 0 1-4.3-8.9c-13.4-3.7-15.9-9.4-19-19.5c1.3 2.6 10.3 4.8 12.7 9c1.8 3.3 3.8 6.4 5.5 8a51.4 51.4 0 0 1-1.9-8.3c-0.1-0.5-0.1-0.9-0.2-1.3c-4.4-2.2-14.6-9.4-15.3-23.2c2 2.9 9.3 2.6 14.9 18.5a82.9 82.9 0 0 1 0.2-9.3c-4.3-3.5-12.5-13.9-11-35c1.7 3.3 10.4 14.3 10.8 21.9a60.7 60.7 0 0 0 0.8 7.3c0.1-0.6 0.1-1.1 0.2-1.7a67.3 67.3 0 0 1 1.6-8.2a26.1 26.1 0 0 0-4.7-10.9a9.8 9.8 0 0 1-1.1-11c1.2-2.6 0.6-8.5 0.6-8.5s8.2 8.2 6.1 27.4a61.7 61.7 0 0 1 2.7-6.9a15.3 15.3 0 0 0-1.3-8.7c-2.2-4.7-4.8-12 1.3-22.9c0.1 4.3 3.8 11.4 3.4 16.9a76.8 76.8 0 0 1-1.8 11.5a57.8 57.8 0 0 1 3.7-6c0.3-2.9-1.1-7-0.9-14.2c0.2-8.7 4-10.5 4.9-15.2c3.4 9 1.5 19.4-1.2 25.6l0.8-1c0.9-1.2 1.8-2.3 2.6-3.4a35.1 35.1 0 0 1 3.7-15.4c1.7-3 6.8-5.5 6.9-8c1.3 9.3-3.2 15.6-7.3 20.2l0 0.1a14.6 14.6 0 0 1 16-2.8s-5.3 4.9-9.7 5.3c-4.2 0.3-6.3 0-8.6 1.4c-0.7 1-1.6 2.1-2.5 3.2c5.7-3.1 14.2-0.1 17.5 2c-4.8 3.8-9.6 2.9-12.3 1.1c-2.4-1.6-5.2-0.1-6.9-0.9a70.2 70.2 0 0 0-4.4 6.3a61.2 61.2 0 0 0-3.7 7.8c3.1-4.4 8.5-9.7 15.3-9.9c-0.2 2.8-3.3 8.2-7.7 10.7c-3.6 2-7.3 2.9-9.4 4.7a65.1 65.1 0 0 0-2 10v0.1c4-10.1 15.2-14.7 18.2-14.9c0 0-5 3.6-5.3 8.3s-4.8 7.2-8.8 8.5a8.8 8.8 0 0 0-4.7 4.1a77.5 77.5 0 0 0 0 12.9c1.3-19.3 14.5-19.3 14.5-19.3a7.8 7.8 0 0 0-2.4 5c-0.4 3.4-1.2 6.1-5.3 10.6a21 21 0 0 0-5.5 11.3a54 54 0 0 0 5.8 13.9c-2.4-6-3.9-14.4-0.8-21.7c0.5 4.2 6.8 10.4 6.8 15.6c0 4.5-1.8 10.4-0.3 14.2c0.8 0.9 1.6 1.9 2.5 2.8c-0.4-2.7-0.1-6.7-0.7-9.5c1.5 2.2 2.4 8.2 3.4 12.3a71 71 0 0 0 6 5.1c-5.1-6-7.7-15.7-6.6-24.8c3.7 3.6 8.7 11.1 8.9 16.9a28.1 28.1 0 0 0 3.7 11.9l1.1 0.6c1.1 0.6 2.3 1.2 3.4 1.7c-5.6-5-7-14.1-7-18.1c6.3 4.4 13 14.6 13.8 20.6c1.2 0.3 2.4 0.6 3.6 0.9c4.8 0.9 10.2 1 14.5-1.3l0.3 0.5h0l0.3 0.5l0.5 1c-5.1 2.6-10.9 2.5-16 1.5a47.4 47.4 0 0 1-5.5-1.5c-2.3 3.8-8.5 7.2-12.4 6.8s-8.2-2.4-10.9-1.5c3.6-6 9.8-7.7 13.9-6.3c3.6 1.2 6.1 1.6 8 0.5a56.2 56.2 0 0 1-7.5-3.4l-1-0.5c-4.9 3-11.2 2.5-15.3 1.1c-4.6-1.5-6.3-6.1-10.1-8.1c9.6-2.5 14.8 0.9 17 3a9.8 9.8 0 0 0 6.5 2.9a66.4 66.4 0 0 1-10.3-7.9c-2.7-0.1-8.3 1.7-12.4-1.7c4-1.3 7.1-1.7 9.8-0.9c-0.9-0.9-1.7-1.8-2.5-2.8c-3.1 0.1-8.7 2-13-0.4a70.7 70.7 0 0 1-10.9-8.1s7.3-0.3 11.2 0.7c-3.6-2-14.3-13.4-14.3-13.7z" />
  <use href="#wreath" style="transform: translate(100%,0) scale(-1, 1);" />
  </use>
  <text x="50%" y="30%" text-anchor="middle" dominant-baseline="central">2022<tspan x="50%" data-dx="50%" dy="15%">1ST</tspan></text>
  <text x="50%" y="90%" text-anchor="middle" dominant-baseline="central">
    AWARD
  </text>
</svg>

Inline svg (appended to your html body) could use webfonts loaded via @font-face. Unfortunately your carousel script apparenty only support single elements (without nested child nodes).

Upvotes: 1

Related Questions