CODEWITHSUNDEEP
csssvg
Blake
Blake

Reputation: 57

How to align SVG path or increase the size of the element?

Background:

I am making an icon loader with two letters and an outer layer. I want to align them correctly

<svg id="logo" xmlns="http://www.w3.org/2000/svg" width="30%" height="30%" viewBox="-4 -4 120 150">
        <title>Loader Logo</title>
        <g>
          <path
            stroke="currentColor"
            strokeWidth="5"
            strokeLinecap="round"
            strokeLinejoin="round"
            d="M 50, 5
                      L 11, 27
                      L 11, 72
                      L 50, 95
                      L 89, 73
                      L 89, 28 z"
          />
          <path
            stroke="currentColor"
            strokeWidth="5"
            strokeLinecap="round"
            strokeLinejoin="round"
            d="M 45.2 0 L 54.9 0 L 32.7 70 L 22.2 70 L 0 0 L 9.8 0 L 27.5 58.3 L 45.2 0 Z"
          />
           <path
            transform="translate(65 0)"
            stroke="currentColor"
            strokeWidth="5"
            strokeLinecap="round"
            strokeLinejoin="round"
            d="M 0 70.001 L 0 0.001 L 18 0.001 A 35.716 35.716 0 0 1 24.843 0.616 Q 28.805 1.39 31.9 3.138 A 18.895 18.895 0 0 1 35.15 5.451 Q 41.012 10.645 41.286 20.428 A 34.665 34.665 0 0 1 41.3 21.401 Q 41.3 27.401 38.45 32.251 Q 35.6 37.101 30.5 39.901 L 44.5 70.001 L 33.7 70.001 L 21.2 42.601 Q 19.6 42.801 17.9 42.801 L 9.1 42.801 L 9.1 70.001 L 0 70.001 Z M 9.1 34.401 L 17.2 34.401 A 27.803 27.803 0 0 0 21.151 34.14 Q 23.178 33.848 24.8 33.23 A 10.46 10.46 0 0 0 28.3 31.101 A 10.525 10.525 0 0 0 31.154 26.328 Q 31.8 24.151 31.8 21.401 A 19.246 19.246 0 0 0 31.458 17.651 Q 31.023 15.465 30.036 13.784 A 9.824 9.824 0 0 0 28.3 11.601 Q 25.761 9.207 21.066 8.55 A 27.955 27.955 0 0 0 17.2 8.301 L 9.1 8.301 L 9.1 34.401 Z"
          />
        
          
        </g>
      </svg>

How it looks now:

Image

Question:

How can I align the outer element so that it covers the VR properly?

Upvotes: 2

Views: 677

Answers (2)

enxaneta
enxaneta

Reputation: 33044

I am wrapping the paths for the VR logo in a <symbol> and using the symbol with <use>.

Please observe that the <symbol> has a viewBox. If a <symbol> has a viewBox attribute, the <use> element can have a width and a height. I'm using the width and the height of the <use> element to resize the group. I'm using the x and y attributes to position the <use> element. Please observe that x="11" y="27" corresponding with the second pair of coordinates for the hexagon d="M 50, 5 L 11, 27 L 11, 72 L 50, 95 L 89, 73 L 89, 28 z".

Initially viewBox="0 0 110 70" where the values used are the same as the values for x y width and height of the bounding box of the group of letters VR. Later I've changed the viewBox to viewBox="-10 -10 130 90" because I wanted a "padding" of 10 units around the group of letters.

Also please observe thet you don't need to declare the stroke="currentColor" stroke-width="5" stroke-linecap="round" stroke-linejoin="round" for every path. You can declare those only once for the group.

<svg id="logo" xmlns="http://www.w3.org/2000/svg" width="30%" height="30%" viewBox="-4 -4 120 150">
<!--<symbol id="vr" viewBox="0 0 110 70">-->
    <symbol id="vr" viewBox="-10 -10 130 90">
          <path
            d="M 45.2 0 L 54.9 0 L 32.7 70 L 22.2 70 L 0 0 L 9.8 0 L 27.5 58.3 L 45.2 0 Z"
          />
           <path 
            transform="translate(65 0)"
            
            d="M 0 70.001 L 0 0.001 L 18 0.001 A 35.716 35.716 0 0 1 24.843 0.616 Q 28.805 1.39 31.9 3.138 A 18.895 18.895 0 0 1 35.15 5.451 Q 41.012 10.645 41.286 20.428 A 34.665 34.665 0 0 1 41.3 21.401 Q 41.3 27.401 38.45 32.251 Q 35.6 37.101 30.5 39.901 L 44.5 70.001 L 33.7 70.001 L 21.2 42.601 Q 19.6 42.801 17.9 42.801 L 9.1 42.801 L 9.1 70.001 L 0 70.001 Z M 9.1 34.401 L 17.2 34.401 A 27.803 27.803 0 0 0 21.151 34.14 Q 23.178 33.848 24.8 33.23 A 10.46 10.46 0 0 0 28.3 31.101 A 10.525 10.525 0 0 0 31.154 26.328 Q 31.8 24.151 31.8 21.401 A 19.246 19.246 0 0 0 31.458 17.651 Q 31.023 15.465 30.036 13.784 A 9.824 9.824 0 0 0 28.3 11.601 Q 25.761 9.207 21.066 8.55 A 27.955 27.955 0 0 0 17.2 8.301 L 9.1 8.301 L 9.1 34.401 Z"
          />
          </symbol>
        <title>Loader Logo</title>
        <g  fill="none" 
            stroke="currentColor"
            stroke-width="5"
            stroke-linecap="round"
            stroke-linejoin="round">
          <path id="hex"
            d="M 50, 5
                      L 11, 27
                      L 11, 72
                      L 50, 95
                      L 89, 73
                      L 89, 28 z"
          />
          
          
        <use xlink:href="#vr" x="11" y="27" width="78" height="47.5"  />
        </g>
      </svg>

Upvotes: 2

agrm
agrm

Reputation: 3852

You will either have to redraw the SVG itself or reposition and resize the paths using CSS.

Here I've used an online editor to load your path, edit it and export it.

html, body {
    background: #000;
}
path {
    stroke: #f00;
}
<svg id="logo" xmlns="http://www.w3.org/2000/svg" width="30%" height="30%" viewBox="-4 -4 120 150">
        <title>Loader Logo</title>
        <g>
          <path
            stroke="currentColor"
            strokeWidth="5"
            strokeLinecap="round"
            strokeLinejoin="round"
            d="m50,5l-39,22l0,45l39,23l39,-22l0,-45l-39,-23z"
          />
          <path
            stroke="currentColor"
            strokeWidth="5"
            strokeLinecap="round"
            strokeLinejoin="round"
            d="m43.56731,31.44373l5.61742,0l-12.85636,38.55627l-6.08071,0l-12.85636,-38.55627l5.67533,0l10.25034,32.11186l10.25034,-32.11186z"
          />
           <path
            stroke="currentColor"
            strokeWidth="5"
            strokeLinecap="round"
            strokeLinejoin="round"
            d="m55.03379,70.00055l0,-38.55627l10.42407,0a20.68368,19.67251 0 0 1 3.96289,0.33874q2.29445,0.42632 4.08682,1.38913a10.94238,10.40744 0 0 1 1.88212,1.27401q3.39477,2.86088 3.55345,8.24939a20.07503,19.09361 0 0 1 0.00811,0.53593q0,3.30482 -1.65048,5.97622q-1.65048,2.6714 -4.60397,4.21365l8.10761,16.57919l-6.25444,0l-7.23894,-15.09202q-0.92658,0.11016 -1.91108,0.11016l-5.09621,0l0,14.98186l-5.26995,0zm5.26995,-19.60862l4.69083,0a16.10114,15.314 0 0 0 2.28808,-0.14376q1.17387,-0.16083 2.11319,-0.50123a6.05755,5.76141 0 0 0 2.0269,-1.17266a6.09519,5.79721 0 0 0 1.65279,-2.62899q0.37411,-1.1991 0.37411,-2.71381a11.14565,10.60077 0 0 0 -0.19806,-2.06551q-0.25192,-1.20406 -0.8235,-2.12996a5.68923,5.4111 0 0 0 -1.00534,-1.2024q-1.47037,-1.31862 -4.18932,-1.6805a16.18917,15.39772 0 0 0 -2.23886,-0.13715l-4.69083,0l0,14.37598z"
          />
        
          
        </g>
      </svg>

...and here is an example using your original SVG but with modified transform attributes:

html, body {
    background: #000;
}
path {
    stroke: #f00;
}
<svg id="logo" xmlns="http://www.w3.org/2000/svg" width="30%" height="30%" viewBox="-4 -4 120 150">
        <title>Loader Logo</title>
        <g>
          <path
            stroke="currentColor"
            strokeWidth="5"
            strokeLinecap="round"
            strokeLinejoin="round"
            d="M 50, 5
                      L 11, 27
                      L 11, 72
                      L 50, 95
                      L 89, 73
                      L 89, 28 z"
          />
          <path
            transform="translate(18 30) scale(.60)" 
            stroke="currentColor"
            strokeWidth="5"
            strokeLinecap="round"
            strokeLinejoin="round"
            d="M 45.2 0 L 54.9 0 L 32.7 70 L 22.2 70 L 0 0 L 9.8 0 L 27.5 58.3 L 45.2 0 Z"
          />
           <path
            transform="translate(55 30) scale(.60)"
            stroke="currentColor"
            strokeWidth="5"
            strokeLinecap="round"
            strokeLinejoin="round"
            d="M 0 70.001 L 0 0.001 L 18 0.001 A 35.716 35.716 0 0 1 24.843 0.616 Q 28.805 1.39 31.9 3.138 A 18.895 18.895 0 0 1 35.15 5.451 Q 41.012 10.645 41.286 20.428 A 34.665 34.665 0 0 1 41.3 21.401 Q 41.3 27.401 38.45 32.251 Q 35.6 37.101 30.5 39.901 L 44.5 70.001 L 33.7 70.001 L 21.2 42.601 Q 19.6 42.801 17.9 42.801 L 9.1 42.801 L 9.1 70.001 L 0 70.001 Z M 9.1 34.401 L 17.2 34.401 A 27.803 27.803 0 0 0 21.151 34.14 Q 23.178 33.848 24.8 33.23 A 10.46 10.46 0 0 0 28.3 31.101 A 10.525 10.525 0 0 0 31.154 26.328 Q 31.8 24.151 31.8 21.401 A 19.246 19.246 0 0 0 31.458 17.651 Q 31.023 15.465 30.036 13.784 A 9.824 9.824 0 0 0 28.3 11.601 Q 25.761 9.207 21.066 8.55 A 27.955 27.955 0 0 0 17.2 8.301 L 9.1 8.301 L 9.1 34.401 Z"
          />
        
          
        </g>
      </svg>

Upvotes: 1

Related Questions