Makes html text behave like a svg, only works on 1 axis

html-as-svg.scss

body {
  font-family: SegoeUI-Semibold;
}

$size: 90vh;
$fit-in: if(unit($size) == "vh", "height", "width");
$viewbox: 0 0 196 97;
$font-size-in-svg: 52;

$width: if($fit-in == "width", $size, $size / nth($viewbox, 4) * nth($viewbox, 3));
$height: if($fit-in == "height", $size, $size / nth($viewbox, 3) * nth($viewbox, 4));

$calc-point-size: $height / nth($viewbox, 4);

.as-svg {
  // center its content like the default svg preserveAspectRatio
  display: flex;
  justify-content: center;
  align-items: center;
  svg, span {
    float: left;
  }
  svg {
    height: $height;
    // height * aspect ratio of current / used svg
    width: $height * 35 / 40;
    // offset of element to the text
    margin-left: $calc-point-size * 4;
  }
  span{
    // font-size: calculated point size * font-size
    font-size: $calc-point-size * $font-size-in-svg;
    // x: calculated point size * x
    margin-left: $calc-point-size * - 2.17;
    // y: calculated point size * ( y - font-size )
    margin-top: $calc-point-size * ( 59.9 - 52 );
    // height: calculated point size * ( y - font-size )
    height: $height - $calc-point-size * ( 59.9 - 52 );
  }
}

info.md

Used svg in code

From:

<svg width="196" height="97" viewBox="0 0 196 97">
  <text x="-2.17" y="64" font-size="52">html</text>
  <svg x="111.125" width="84.875" height="97" viewBox="0 0 35 40">
    <path d="M7.67611896,7.03734071 L8.33685587,14.3132077 L33.9906416,14.348283 L32.0857169,36.043109 L17.6410248,40.0257765 L3.25572852,35.9793013 L2.22840068,25.0131679 L9.21772315,24.3555718 L9.79442472,30.5115291 L17.6598348,32.7240096 L25.5202667,30.5567439 L26.3266509,21.3729868 L1.92587088,21.3396246 L-0.0118290998,0.00216482566 L34.9859353,0.00216482566 L34.9859353,7.03734071 L7.67611896,7.03734071 Z M4.43619799,4.07251658 L34.9859353,4.07251658 L34.9859353,2.96698895 L3.22809187,2.96698895 L4.62764312,18.3784918 L29.5564755,18.4125759 L28.287135,32.8688549 L17.6519077,35.8011828 L7.03883132,32.8158045 L6.27222297,24.6327016 L5.17390086,24.7360381 L6.01132192,33.6750259 L17.6489519,36.9486033 L29.3188486,33.730998 L30.7608169,17.3086939 L5.63508362,17.2743405 L4.43619799,4.07251658 Z"/>
  </svg>
</svg>

To:

<div class="as-svg">
  <span>html</span>
  <svg width="35" height="40" viewBox="0 0 35 40">
    <path d="M7.676 7.037l.66 7.276 25.655.035-1.905 21.695-14.445 3.983-14.385-4.047-1.028-10.966 6.99-.657.576 6.156 7.866 2.212 7.86-2.167.807-9.184-24.401-.033L-.012.002h34.998v7.035H7.676zm-3.24-2.964h30.55V2.967H3.228l1.4 15.411 24.928.035-1.269 14.456L17.652 35.8 7.039 32.816l-.767-8.183-1.098.103.837 8.939 11.638 3.274 11.67-3.218 1.442-16.422-25.126-.035L4.436 4.073z"/>
  </svg>
</div>