Question 45025 in Html Question posted in
Some basic documentation can be found here.

How would I place a logo inside of an animated spinner that uses <svg><circle>? – Html

Here is the html of the spinner (loader)

<svg viewBox="25 25 50 50">
  <circle r="20" cy="50" cx="50"></circle>
</svg>

I want to know how I can place a logo inside of this. I can add the css if someone suggests it. But so far I have been unsuccessful. I have tried to add inside but the results are always incredibly wonky.

tags and centering the logo inside was only a temporary fix, when the screen size changed the logo was off center or changing size. I need it to be contained inside of the spinner.

Tags:

2

Answers


  1. 0

    You can perhaps add a img tag inside the circle;

    <img src="logo.jpg" alt="logo_image">

    You can read more here;
    https://www.w3schools.com/html/html_images.asp

    Login or Signup to reply.
  2. 0

    You could try this:

    • paste your Logo’s svg markup into your loading spinner like a nested svg
    • change the logo <svg> to a <symbol> and add a unique ID
    • place the logo as a <use> element referencing the previously created symbol
    • adjust x, y and width to get the desired layout position and size
    img,
svg{
  width:20em;
  height:auto;
}
    <p>Logo as symbol</p>
<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  
<symbol id="logo" viewBox="0 0 203 120" >
  <path  d="M0 24.6 L9.5 24.6 L9.5 85.2 L37.8 85.2 L36.7 93.5 L0 93.5 L0 24.6 ZM69.1 39.6 Q80.2 39.6 86.4 47 Q92.5 54.4 92.5 67.1 L92.5 67.1 Q92.5 75.3 89.7 81.5 Q86.9 87.8 81.6 91.3 Q76.3 94.7 69 94.7 L69 94.7 Q57.9 94.7 51.7 87.3 Q45.5 79.9 45.5 67.2 L45.5 67.2 Q45.5 59 48.3 52.8 Q51.1 46.5 56.4 43 Q61.7 39.6 69.1 39.6 L69.1 39.6 ZM69.1 47 Q55.4 47 55.4 67.2 L55.4 67.2 Q55.4 87.3 69 87.3 L69 87.3 Q82.6 87.3 82.6 67.1 L82.6 67.1 Q82.6 47 69.1 47 L69.1 47 ZM147.5 34.9 L150.2 43.2 Q147.2 44.2 143.6 44.5 Q140 44.8 134.8 44.8 L134.8 44.8 Q144.1 49 144.1 58.1 L144.1 58.1 Q144.1 66 138.7 71 Q133.3 76 124 76 L124 76 Q120.4 76 117.3 75 L117.3 75 Q116.1 75.8 115.4 77.2 Q114.7 78.5 114.7 79.9 L114.7 79.9 Q114.7 84.2 121.6 84.2 L121.6 84.2 L130 84.2 Q135.3 84.2 139.4 86.1 Q143.5 88 145.8 91.3 Q148 94.6 148 98.8 L148 98.8 Q148 106.5 141.7 110.7 Q135.4 114.8 123.3 114.8 L123.3 114.8 Q114.8 114.8 109.9 113 Q104.9 111.3 102.8 107.8 Q100.7 104.3 100.7 98.8 L100.7 98.8 L109 98.8 Q109 102 110.2 103.8 Q111.4 105.7 114.5 106.7 Q117.6 107.6 123.3 107.6 L123.3 107.6 Q131.6 107.6 135.2 105.5 Q138.7 103.5 138.7 99.4 L138.7 99.4 Q138.7 95.7 135.9 93.8 Q133.1 91.9 128.1 91.9 L128.1 91.9 L119.8 91.9 Q113.1 91.9 109.7 89 Q106.2 86.2 106.2 81.9 L106.2 81.9 Q106.2 79.3 107.7 76.9 Q109.2 74.5 112 72.6 L112 72.6 Q107.4 70.2 105.3 66.7 Q103.1 63.1 103.1 58 L103.1 58 Q103.1 52.7 105.8 48.5 Q108.4 44.3 113.1 41.9 Q117.7 39.6 123.4 39.6 L123.4 39.6 Q129.6 39.7 133.8 39.1 Q138 38.6 140.8 37.6 Q143.5 36.7 147.5 34.9 L147.5 34.9 ZM123.4 46.2 Q118.2 46.2 115.4 49.4 Q112.5 52.7 112.5 58 L112.5 58 Q112.5 63.4 115.4 66.7 Q118.3 69.9 123.6 69.9 L123.6 69.9 Q129 69.9 131.9 66.8 Q134.7 63.6 134.7 57.9 L134.7 57.9 Q134.7 46.2 123.4 46.2 L123.4 46.2 ZM179.5 39.6 Q190.6 39.6 196.8 47 Q202.9 54.4 202.9 67.1 L202.9 67.1 Q202.9 75.3 200.1 81.5 Q197.3 87.8 192 91.3 Q186.7 94.7 179.4 94.7 L179.4 94.7 Q168.3 94.7 162.1 87.3 Q155.9 79.9 155.9 67.2 L155.9 67.2 Q155.9 59 158.7 52.8 Q161.5 46.5 166.8 43 Q172.1 39.6 179.5 39.6 L179.5 39.6 ZM179.5 47 Q165.8 47 165.8 67.2 L165.8 67.2 Q165.8 87.3 179.4 87.3 L179.4 87.3 Q193 87.3 193 67.1 L193 67.1 Q193 47 179.5 47 L179.5 47 Z "/>
  </symbol>
  
  <path d="M10.72,19.9a8,8,0,0,1-6.5-9.79A7.77,7.77,0,0,1,10.4,4.16a8,8,0,0,1,9.49,6.52A1.54,1.54,0,0,0,21.38,12h.13a1.37,1.37,0,0,0,1.38-1.54,11,11,0,1,0-12.7,12.39A1.54,1.54,0,0,0,12,21.34h0A1.47,1.47,0,0,0,10.72,19.9Z">
    <animateTransform attributeName="transform" type="rotate" dur="0.75s" values="0 12 12;360 12 12" repeatCount="indefinite" />
  </path>
  <use x="6" y="0" width="12" href="#logo" xlink:href="#logo" />
</svg>

<p>Logo in image (data URI)</p>
<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <path d="M10.72,19.9a8,8,0,0,1-6.5-9.79A7.77,7.77,0,0,1,10.4,4.16a8,8,0,0,1,9.49,6.52A1.54,1.54,0,0,0,21.38,12h.13a1.37,1.37,0,0,0,1.38-1.54,11,11,0,1,0-12.7,12.39A1.54,1.54,0,0,0,12,21.34h0A1.47,1.47,0,0,0,10.72,19.9Z">
    <animateTransform attributeName="transform" type="rotate" dur="0.75s" values="0 12 12;360 12 12" repeatCount="indefinite" />
  </path>
  <image x="6" y="8" width="12"  xlink:href="data:image/svg+xml,%3Csvg class='svgText' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 203 120' %3E%3Cpath class='glyph' d='M0 24.6 L9.5 24.6 L9.5 85.2 L37.8 85.2 L36.7 93.5 L0 93.5 L0 24.6 ZM69.1 39.6 Q80.2 39.6 86.4 47 Q92.5 54.4 92.5 67.1 L92.5 67.1 Q92.5 75.3 89.7 81.5 Q86.9 87.8 81.6 91.3 Q76.3 94.7 69 94.7 L69 94.7 Q57.9 94.7 51.7 87.3 Q45.5 79.9 45.5 67.2 L45.5 67.2 Q45.5 59 48.3 52.8 Q51.1 46.5 56.4 43 Q61.7 39.6 69.1 39.6 L69.1 39.6 ZM69.1 47 Q55.4 47 55.4 67.2 L55.4 67.2 Q55.4 87.3 69 87.3 L69 87.3 Q82.6 87.3 82.6 67.1 L82.6 67.1 Q82.6 47 69.1 47 L69.1 47 ZM147.5 34.9 L150.2 43.2 Q147.2 44.2 143.6 44.5 Q140 44.8 134.8 44.8 L134.8 44.8 Q144.1 49 144.1 58.1 L144.1 58.1 Q144.1 66 138.7 71 Q133.3 76 124 76 L124 76 Q120.4 76 117.3 75 L117.3 75 Q116.1 75.8 115.4 77.2 Q114.7 78.5 114.7 79.9 L114.7 79.9 Q114.7 84.2 121.6 84.2 L121.6 84.2 L130 84.2 Q135.3 84.2 139.4 86.1 Q143.5 88 145.8 91.3 Q148 94.6 148 98.8 L148 98.8 Q148 106.5 141.7 110.7 Q135.4 114.8 123.3 114.8 L123.3 114.8 Q114.8 114.8 109.9 113 Q104.9 111.3 102.8 107.8 Q100.7 104.3 100.7 98.8 L100.7 98.8 L109 98.8 Q109 102 110.2 103.8 Q111.4 105.7 114.5 106.7 Q117.6 107.6 123.3 107.6 L123.3 107.6 Q131.6 107.6 135.2 105.5 Q138.7 103.5 138.7 99.4 L138.7 99.4 Q138.7 95.7 135.9 93.8 Q133.1 91.9 128.1 91.9 L128.1 91.9 L119.8 91.9 Q113.1 91.9 109.7 89 Q106.2 86.2 106.2 81.9 L106.2 81.9 Q106.2 79.3 107.7 76.9 Q109.2 74.5 112 72.6 L112 72.6 Q107.4 70.2 105.3 66.7 Q103.1 63.1 103.1 58 L103.1 58 Q103.1 52.7 105.8 48.5 Q108.4 44.3 113.1 41.9 Q117.7 39.6 123.4 39.6 L123.4 39.6 Q129.6 39.7 133.8 39.1 Q138 38.6 140.8 37.6 Q143.5 36.7 147.5 34.9 L147.5 34.9 ZM123.4 46.2 Q118.2 46.2 115.4 49.4 Q112.5 52.7 112.5 58 L112.5 58 Q112.5 63.4 115.4 66.7 Q118.3 69.9 123.6 69.9 L123.6 69.9 Q129 69.9 131.9 66.8 Q134.7 63.6 134.7 57.9 L134.7 57.9 Q134.7 46.2 123.4 46.2 L123.4 46.2 ZM179.5 39.6 Q190.6 39.6 196.8 47 Q202.9 54.4 202.9 67.1 L202.9 67.1 Q202.9 75.3 200.1 81.5 Q197.3 87.8 192 91.3 Q186.7 94.7 179.4 94.7 L179.4 94.7 Q168.3 94.7 162.1 87.3 Q155.9 79.9 155.9 67.2 L155.9 67.2 Q155.9 59 158.7 52.8 Q161.5 46.5 166.8 43 Q172.1 39.6 179.5 39.6 L179.5 39.6 ZM179.5 47 Q165.8 47 165.8 67.2 L165.8 67.2 Q165.8 87.3 179.4 87.3 L179.4 87.3 Q193 87.3 193 67.1 L193 67.1 Q193 47 179.5 47 L179.5 47 Z '/%3E%3C/svg%3E" />
</svg>

<p><img src="https://svgshare.com/i/qZL.svg" alt=""></p>

    Alternative: convert your logo to a data URI and use an <image> element instead.

    However, please make sure your logo image is highly optimized and lightweight – otherwise you need a loading spinner for your loading spinner 😉

    The spinner used in the example was taken from this github repository: SVG Spinners (CSS & SMIL).

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search