Author Topic: SVG: internal and external link icons (Read 1032 times)

ian · « **on:** 29 Oct 2019, 06:16:57 pm »

At just over 400 bytes, these are small image files that you can add to your site to indicate when an anchor link is internal or external.

Internal

Code: [Select]

<svg xmlns="http://www.w3.org/2000/svg"
  baseProfile="full"
  width="500"
  height="500"
  stroke="#696969"
  stroke-linejoin="round">
  <path
    d="M330 50H130A-100 100 0 0 0 30 150v200a100 100 0 0 0 100 100h200a100-100 0 0 0 100-100V150"
    stroke-width="40"
    stroke-linecap="round"
    fill="none" />
  <path
    d="M250 250l40 40H190V190l40 40L380 80l20 20z"
    stroke-width="20"
    fill="#696969" />
</svg>

External

Code: [Select]

<svg xmlns="http://www.w3.org/2000/svg"
  baseProfile="full"
  width="500"
  height="500"
  stroke="#696969"
  stroke-linejoin="round">
  <path
    d="M330 50H130A-100 100 0 0 0 30 150v200a100 100 0 0 0 100 100h200a100-100 0 0 0 100-100V150"
    stroke-width="40"
    stroke-linecap="round"
    fill="none" />
  <path
    d="M490 10H390l40 40-200 200 20 20L450 70l40 40z"
    stroke-width="20"
    fill="#696969" />
</svg>

Here's a suggestion to use the images with the CSS background property, it uses the size attribute which is CSS 3 hence the @media (min-width:1px) trick of Jason's:

Code: [Select]

@media (min-width:1px) {
  .internal {
    background: url(internal_link.svg) top right/.8em no-repeat;
    padding-right: 1em;
  }
  .external {
    background: url(external_link.svg) top right/.8em no-repeat;
    padding-right: 1em;
  }
}

The demo below uses this as a separate file, but there's no need to, just paste it at the end of your own CSS file.

Here's an example html page for testing:

Code: [Select]

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8">
<meta
	name="viewport"
	content="width=device-width,height=device-height,initial-scale=1"
>
<link
  rel="stylesheet"
  href="link-icon.css"
  media="screen"
>
<title>Link Icon Demonstration</title>
</head><body>
  <h1>Demonstration</h1>
  <p>
    A simple example using the CSS background property to show an icon indicating if an anchor is external or internal.
  </p>
  <h2>External link</h2>
  <p>
    Here's an example paragraph <a href="#" class="external">with an external link</a> with some rambling text after!
  </p>
  <h2>Internal link</h2>
  <p>
    And another example paragraph <a href="#" class="internal">with an internal link</a> and more rambling text!
  </p>
</body></html>

File names used:

internal_link.svg
external_link.svg
link-icon.css
link-icon.html

Jason Knight · « **Reply #1 on:** 30 Oct 2019, 11:24:42 am »

Whilst the icons themselves are nice, clean, and tidy, the fact they're the wasteful SVG when monochromatic is a bit of an issue, as is the extra handshakes.

I'll try to remember, but if I have time later I'll toss those into a webfont so as to reduce the handshakes by one and shrink the overall code further. I'm thinking map them to /u2197 and /u2199 so they even have webfont off fallbacks.

something like:

Code: [Select]

.internal:after,
.external:after {
	font-family:"link icons",sans-serif;
	padding-left:0.3em;
}

.internal:after {
	content:"/u2199";
}

.external:after {
	content:"/u2197";
}

Not counting the webfont @font declaration of course.

Hmm. I wonder if we even need a webfont for this.

Border and some creative use of text-shadow could work wonders.

There's something about SVG that just bugs me... maybe it's because its creators -- M$ and Adobe -- basically abandoned it at birth 18-20 years ago... maybe because being XML it's a painfully inefficient way of storing vectors... There's something else about them though, something I can't quite put into words. They FEEL dirty.

Still, nice clean easy to see icons. I love vector icons. (in case you couldn't tell from the use of font-awesome in the current template skin.)

Jason Knight · « **Reply #2 on:** 30 Oct 2019, 11:32:39 am »

Oh, I think a third icon might not be a bad idea either... separate the links into:

1) hash link to current page

2) link to other page on current site

3) link to external site

CUTCODEDOWN
Minimalist Semantic Markup