SVG logo – mobile display

  • Hi,

    After some reading about SVGs I decided to make an SVG of my site logo ??

    I did the design in Inkscape and used the SVG Support plugin to enable me to upload the file to WordPress.

    I went to the Customiser section and selected the new SVG for both logo and retina logo. Cycling through the Desktop, Tablet, and Mobile displays in Customiser the image looks exactly as it should with the length of the text matching the length of the 3 boxes underneath.

    However, when I actually look on my mobile (Galaxy S21) the display is slightly ‘off’ – the length of the text is now a little shorter than the length of the 3 boxes.

    This is the CSS that I have:

    /* Align site logo to the left */
header .site-logo {
  float: left;
  padding-top: 15px;
}

/* Set size for svg logo */
 .site-logo img {
    width: 150px;
    height: auto;
}

    What am I missing?

    Thanks,
    Richie

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)

  • Hi there,

    I see that the logo contents have text elements in it.

    It’s bound to change depending on what device you view it on.

    Consider expanding the text vector into shape vectors so the aspect ratio is kept.

    You can try this SVG code and save is as .svg file.

    <svg id="Layer_1" data-name="Layer 1" xmlns="https://www.w3.org/2000/svg" viewBox="0 0 150 28">
  <g style="isolation: isolate">
    <path d="M0,14.5V0H6.7a11.41,11.41,0,0,1,3.7.4,3.19,3.19,0,0,1,1.8,1.4A3.78,3.78,0,0,1,13,4.1a4.06,4.06,0,0,1-1,2.7A4.69,4.69,0,0,1,8.9,8.1a8.31,8.31,0,0,1,1.7,1.2,9.1,9.1,0,0,1,1.8,2.4l1.9,2.8H10.5L8.2,11.3A19.8,19.8,0,0,0,6.5,9.2a2.07,2.07,0,0,0-1-.6,7.12,7.12,0,0,0-1.6-.1H3.2v6.1H0ZM3.2,6.1H5.6a14.82,14.82,0,0,0,2.9-.2,1.46,1.46,0,0,0,.9-.6,2,2,0,0,0,.3-1.1A1.59,1.59,0,0,0,9.3,3,3.2,3.2,0,0,0,8,2.5H3.2Z"/>
    <path d="M16,2.6V0h3V2.6Zm0,11.9V4h3V14.5Z"/>
    <path d="M32.2,7.1l-3,.5a1.64,1.64,0,0,0-.7-1.2A2.12,2.12,0,0,0,27.1,6a2.14,2.14,0,0,0-1.8.7,3.29,3.29,0,0,0-.7,2.4,3.68,3.68,0,0,0,.7,2.6,2.5,2.5,0,0,0,1.8.8,1.74,1.74,0,0,0,1.4-.5,3,3,0,0,0,.8-1.6l3,.5a4.33,4.33,0,0,1-1.8,2.8,6.29,6.29,0,0,1-3.5,1,5.35,5.35,0,0,1-4-1.5,5.35,5.35,0,0,1-1.5-4A5.59,5.59,0,0,1,23,5.1a5.59,5.59,0,0,1,4.1-1.5,6.18,6.18,0,0,1,3.3.8A5.38,5.38,0,0,1,32.2,7.1Z"/>
    <path d="M37.5,0V5.3A4.59,4.59,0,0,1,41,3.7a4.06,4.06,0,0,1,1.9.4,2.54,2.54,0,0,1,1.3.9,3.38,3.38,0,0,1,.6,1.2A9.1,9.1,0,0,1,45,8.3v6.2H42V9a7.83,7.83,0,0,0-.2-2.1,1.34,1.34,0,0,0-.6-.7A2.66,2.66,0,0,0,40,5.9a3.19,3.19,0,0,0-1.4.3,2.19,2.19,0,0,0-.9,1,5.25,5.25,0,0,0-.3,2v5.3h-3V0Z"/>
    <path d="M48,2.6V0h3V2.6Zm0,11.9V4h3V14.5Z"/>
    <path d="M60.8,11.2l3,.5A4.67,4.67,0,0,1,62,14a6.06,6.06,0,0,1-3.2.8A5.18,5.18,0,0,1,54.4,13a5.52,5.52,0,0,1-1.1-3.6,5.59,5.59,0,0,1,1.5-4.1,5.2,5.2,0,0,1,3.8-1.5,4.93,4.93,0,0,1,4,1.6c1,1,1.5,2.6,1.4,4.8H56.4a2.74,2.74,0,0,0,.7,1.9,2.41,2.41,0,0,0,1.8.7,1.59,1.59,0,0,0,1.2-.4A3.46,3.46,0,0,0,60.8,11.2ZM61,8.4a2.14,2.14,0,0,0-.7-1.8A2.27,2.27,0,0,0,58.7,6a1.86,1.86,0,0,0-1.6.7,2.44,2.44,0,0,0-.6,1.8H61Z"/>
    <path d="M66.5,5.2l-.6-2.7V0h3.3V2.5l-.5,2.7Z"/>
    <path d="M70.7,11.5l3.1-.4a1.74,1.74,0,0,0,.8,1.2,2.86,2.86,0,0,0,1.7.4,3,3,0,0,0,1.8-.4.75.75,0,0,0,.4-.7.76.76,0,0,0-.2-.5,3.36,3.36,0,0,0-1-.4c-2.5-.5-4-.9-4.7-1.4A2.47,2.47,0,0,1,71.1,7a2.8,2.8,0,0,1,1.2-2.3A6.1,6.1,0,0,1,76,3.8a6.55,6.55,0,0,1,3.5.7,3.75,3.75,0,0,1,1.6,2.1L78.2,7a1.6,1.6,0,0,0-.7-.9A3.06,3.06,0,0,0,76,5.8a3.42,3.42,0,0,0-1.7.3.6.6,0,0,0-.3.6.55.55,0,0,0,.3.5,15.25,15.25,0,0,0,2.8.8,9.87,9.87,0,0,1,3.4,1.2,2.66,2.66,0,0,1,1,2.1,3,3,0,0,1-1.3,2.5,6.25,6.25,0,0,1-3.9,1,6.53,6.53,0,0,1-3.7-.9A4.06,4.06,0,0,1,70.7,11.5Z"/>
    <path d="M90.3,14.5V0H97a11.41,11.41,0,0,1,3.7.4,3.19,3.19,0,0,1,1.8,1.4,3.69,3.69,0,0,1,.7,2.3,3.69,3.69,0,0,1-1.1,2.7A4.69,4.69,0,0,1,99,8.1a8.31,8.31,0,0,1,1.7,1.2,9.1,9.1,0,0,1,1.8,2.4l1.9,2.8h-3.8l-2.3-3.2a19.8,19.8,0,0,0-1.7-2.1,2.07,2.07,0,0,0-1-.6A5.67,5.67,0,0,0,94,8.4h-.6v6.1Zm3.2-8.4h2.4a14.82,14.82,0,0,0,2.9-.2,1.46,1.46,0,0,0,.9-.6,2,2,0,0,0,.3-1.1A1.59,1.59,0,0,0,99.6,3a2.28,2.28,0,0,0-1.2-.6H93.6V6.1Z"/>
    <path d="M105.5,9.1a5.44,5.44,0,0,1,.7-2.7,5.06,5.06,0,0,1,2.1-2,6.17,6.17,0,0,1,3.1-.7,5.89,5.89,0,0,1,4.3,1.6,5.07,5.07,0,0,1,1.7,3.9,5.44,5.44,0,0,1-1.7,4,6.49,6.49,0,0,1-7.2.9,4.59,4.59,0,0,1-2.2-1.9A5.94,5.94,0,0,1,105.5,9.1Zm3.2.2a3.65,3.65,0,0,0,.8,2.4,2.44,2.44,0,0,0,2,.8,2.79,2.79,0,0,0,2-.8,3.65,3.65,0,0,0,.8-2.4,3.65,3.65,0,0,0-.8-2.4,2.44,2.44,0,0,0-2-.8,2.79,2.79,0,0,0-2,.8A3.29,3.29,0,0,0,108.7,9.3Z"/>
    <path d="M119.1,9.1a5.44,5.44,0,0,1,.7-2.7,5.06,5.06,0,0,1,2.1-2,6.17,6.17,0,0,1,3.1-.7,5.89,5.89,0,0,1,4.3,1.6A5.07,5.07,0,0,1,131,9.2a5.44,5.44,0,0,1-1.7,4,6.49,6.49,0,0,1-7.2.9,4.59,4.59,0,0,1-2.2-1.9A5.13,5.13,0,0,1,119.1,9.1Zm3.1.2a3.65,3.65,0,0,0,.8,2.4,2.44,2.44,0,0,0,2,.8,2.79,2.79,0,0,0,2-.8,3.65,3.65,0,0,0,.8-2.4,3.65,3.65,0,0,0-.8-2.4,2.44,2.44,0,0,0-2-.8,2.79,2.79,0,0,0-2,.8A3.29,3.29,0,0,0,122.2,9.3Z"/>
    <path d="M133.1,4h2.8V5.4a4.75,4.75,0,0,1,3.6-1.7,3.81,3.81,0,0,1,1.9.4,3.25,3.25,0,0,1,1.3,1.3,4.84,4.84,0,0,1,1.6-1.3,4.06,4.06,0,0,1,1.9-.4,4.34,4.34,0,0,1,2.1.5,3.53,3.53,0,0,1,1.3,1.4,5.73,5.73,0,0,1,.3,2.2v6.7h-3v-6a4.31,4.31,0,0,0-.3-2,1.49,1.49,0,0,0-1.3-.6,1.92,1.92,0,0,0-1.2.4,2.54,2.54,0,0,0-.8,1,6.53,6.53,0,0,0-.2,2.2v5.1h-3V8.8a7.47,7.47,0,0,0-.2-2,1.79,1.79,0,0,0-.5-.7,2,2,0,0,0-.9-.2,2.77,2.77,0,0,0-1.3.3,2,2,0,0,0-.8,1,6.22,6.22,0,0,0-.2,2.2v5.1h-3V4Z"/>
  </g>
  <path d="M0,19.2H46.9V28H0Z" fill="red"/>
  <path d="M51.4,19.2H98.3V28H51.4Z" fill="#ff6200"/>
  <path d="M102.9,19.2h46.9V28H102.9Z" fill="#ff9000"/>
</svg>
    Thread Starter richieps

    (@richieps)

    Thank you so much for your insight. I did as you suggested and expanded the text vector so that it overlapped with the shapes and … it works!

    Thanks again ??

    Nice one. No problem. ??

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘SVG logo – mobile display’ is closed to new replies.