I don’t mean the actual logo, just the part where you indicate they’re a trademark. These things:

™ ® ℠

There's a solid argument to be had that a machine-readable, semantic indicator of trademark data is an even more airtight way to mark ownership than the original <path>s or whatever.

And it’s not much code, either:

  <!-- This… -->
<text style="font:700 17px Helvetica Neue,Helvetica,sans-serif"
      x="480" y="137">®</text>

<!-- Instead of this: -->
<path d="M2547 644c-6 0-12 2-17 5-6 3-10 7-13 13
a36 36 0 0 0 0 35c3 6 7 10 13 13a36 36 0 0 0 35 0c5-3 10-7 13-13
a36 36 0 0 0 0-35c-3-6-8-10-13-13-6-3-12-5-18-5zm0 6c5 0 10 1 15 4
a30 30 0 0 1 11 40c-3 5-6 9-11 11a30 30 0 0 1-40-11 30 30 0 0 1 25-44z
M2533 660v42h6v-18h3c3 0 4 1 5 2l7 9 3 7h8l-5-8-6-9-3-2c3 0 6-1 8-4
a12 12 0 0 0 1-14l-5-4-9-1h-13zm6 6h13a6 6 0 0 1 3 6l-1 5-8 1h-7v-12z"/>

Usually the hardest part is finding the typeface it’s in. In my experience, it’s always Helvetica, Helvetica Neue, or Arial. Sometimes it’s bold.


Okay thanks for explaining nothing, bud

—You, probably


Step 1: Regular minification

For this demonstration, I’ll use a freely-licensed former VISA logo, since it won’t get me in trouble like a current one might. As a bonus, it has two registered trademark signs.

If you look at the source of the Wikipedia version, it’s got inkscape:-prefixed attributes and other visual editor stuff, so we’ll tumble-dry it through SVGOMG first and then clean up the fill-mode attributes and other stuff it didn’t catch.

After minifying it, we have this:

Note that the trademark symbols take up more filesize than the actual logo!

The paths that correspond to the registered trademark symbols are even marked with font-family="Arial", font-size="60", and font-weight="400", so we don’t even have to guess the font metrics.

Step 2: Change those <path>s to <text>®</text>

We have the font-family, size, and weight, so let’s plug those attributes into <text> and position them using the first coordinates in the <path>’s d values (just after the M):

Hm. That doesn’t look quite right.

Step 3: Adjust with the invert trick

I guess those font metric attributes were lies. It happens, most code is lies.

What ensues now, unfortunately, is “tweak the values and see if it lines up better”. To make this easier, I do the following:

  1. Set style="background:gray" on the root <svg> (every browser supports this)
  2. Set the original’s fill to black
  3. Set the replacment’s fill to white and its opacity to 0.5

This way, the differences are highlighted:

Step 4: Clean it back up

Version Filesize Filesize (gzipped)
Original 1.36kB 0.673kB
®-turned-to-<text> 0.734kB 0.462kB

Not a lot, but hey. It’s half the size!

And if you can ask the designer to export the logo without converting the trademark symbols to paths first, then it’s even easier!

2,272 0 35