Improve SVG files

[rdwebdesign]

What does this PR aim to accomplish?:

• Improve Pi-hole Logo size.
• Simplify the page, moving the SVG code to an external file.
  Background:
  In 2 previous PRs, the pi-hole icon was introduced as an inline SVG in more than one place (the code was duplicated).
  Later, the code was improved to avoid the duplication, using an SVG symbol.
  The symbol needed to be inline (inside the HTML), because the Content-Security-Policy didn't allow the use of <use xlink:href=""> tag with external SVG files.
• Improve safari-pinned-tab.svg icon, reducing it's size;

How does this PR accomplish the above?:

Now, after the new config introduced by pi-hole/pi-hole#4862 and #2287, it is possible to move the SVG code to an external file.

The safari-pinned-tab.svg was reduced after simplifying the icon paths and optimizing the file.

What documentation changes (if any) are needed to support this PR?:

none

---

By submitting this pull request, I confirm the following:

1. I have read and understood the contributors guide, as well as this entire template. I understand which branch to base my commits and Pull Requests against.
2. I have commented my proposed changes within the code and I have tested my changes.
3. I am willing to help maintain this change if there are issues with it later.
4. It is compatible with the EUPL 1.2 license
5. I have squashed any insignificant commits. (git rebase)

---

• I have read the above and my PR is ready for review. Check this box to confirm

[dschaper]

img/pihole_icon.svg

That file looks blank to me. I can see the xml code is there but it looks like it's rendered as just a transparent file.

[rdwebdesign]

This file contains a SVG symbol. You need to "import" the symbol using <use> tag to see the content.