SVG multiple paths and <g> tags for CSS manipulation-CodePudding

I've run into a problem while following a guide for responsive CSS navbars. I was trying to replicate what the Fireship creator was doing here (timestamped video:https://youtu.be/biOMz4puGt8?t=266). Tried replacing the SVGs he was using in the HTML file with other FontAwesome ones and I realized they are far, far less detailed than his. Specifically he has multiple tags and paths and classes he can manipulate using CSS.

How did he obtain such detailed SVGs? Did he edit them in Inkscape/Illustrator and redrew them or is there a way to unpack SVGs in this way?

His SVGs:

        <li >
            <a href="https://github.com/example" >
                <svg
                  aria-hidden="true"
                  focusable="false"
                  data-prefix="fad"
                  data-icon="cat"
                  role="img"
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 512 512"
                  
                >
                  <g >
                    <path
                      fill="currentColor"
                      d="M448 96h-64l-64-64v134.4a96 96 0 0 0 192 0V32zm-72 80a16 16 0 1 1 16-16 16 16 0 0 1-16 16zm80 0a16 16 0 1 1 16-16 16 16 0 0 1-16 16zm-165.41 16a204.07 204.07 0 0 0-34.59 2.89V272l-43.15-64.73a183.93 183.93 0 0 0-44.37 26.17L192 304l-60.94-30.47L128 272v-80a96.1 96.1 0 0 0-96-96 32 32 0 0 0 0 64 32 32 0 0 1 32 32v256a64.06 64.06 0 0 0 64 64h176a16 16 0 0 0 16-16v-16a32 32 0 0 0-32-32h-32l128-96v144a16 16 0 0 0 16 16h32a16 16 0 0 0 16-16V289.86a126.78 126.78 0 0 1-32 4.54c-61.81 0-113.52-44.05-125.41-102.4z"
                      
                    ></path>
                    <path
                      fill="currentColor"
                      d="M376 144a16 16 0 1 0 16 16 16 16 0 0 0-16-16zm80 0a16 16 0 1 0 16 16 16 16 0 0 0-16-16zM131.06 273.53L192 304l-23.52-70.56a192.06 192.06 0 0 0-37.42 40.09zM256 272v-77.11a198.62 198.62 0 0 0-43.15 12.38z"
                      
                    ></path>
                  </g>
                </svg>
                <span >My GitHub profile</span>
            </a>
        </li>

My SVGs:

<li >
            <a href="#" >
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><!--! Font Awesome Pro 6.1.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M256 48C256 21.49 277.5 0 304 0H592C618.5 0 640 21.49 640 48V464C640 490.5 618.5 512 592 512H381.3C383 506.1 384 501.6 384 496V253.3C402.6 246.7 416 228.9 416 208V176C416 149.5 394.5 128 368 128H256V48zM571.3 347.3C577.6 341.1 577.6 330.9 571.3 324.7L507.3 260.7C501.1 254.4 490.9 254.4 484.7 260.7L420.7 324.7C414.4 330.9 414.4 341.1 420.7 347.3C426.9 353.6 437.1 353.6 443.3 347.3L480 310.6V432C480 440.8 487.2 448 496 448C504.8 448 512 440.8 512 432V310.6L548.7 347.3C554.9 353.6 565.1 353.6 571.3 347.3H571.3zM0 176C0 167.2 7.164 160 16 160H368C376.8 160 384 167.2 384 176V208C384 216.8 376.8 224 368 224H16C7.164 224 0 216.8 0 208V176zM352 480C352 497.7 337.7 512 320 512H64C46.33 512 32 497.7 32 480V256H352V480zM144 320C135.2 320 128 327.2 128 336C128 344.8 135.2 352 144 352H240C248.8 352 256 344.8 256 336C256 327.2 248.8 320 240 320H144z"/></svg>
                <span >My Archived Pages</span>
            </a>
        </li>

CodePudding user response：

You don't have a class on your path. You should still be able to select it with the tag , tho. in order to have more control (specificity) with styling, classes or an id is a good idea. Here's a quick tutorial on css/svgs on the MDN page. it might help to have an example to compare to.

https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/SVG_and_CSS

CodePudding user response：

Answering my own question and congratulating skipZero for the link and help he offered :)

First of all there was an issue of SVG objects and pathing - I needed to drop the SVGs into Inkscape/Illustrator and create new objects for the space in between already drawn objects (in our case the letters inside the linkedin black shape of the background were not already made and I created them via fill, then grouping them, then path to object and combining them).

After combining the items it gave me a second path to copy and paste into the html under the svg I wanted to edit.

Secondly the extra classes and info had to be manually inputted. No tool out there does that for you and the specifications helped tremendously.

Then it all worked out as per Fireship's video.

Happy coding!