Should I Use HTML Entity or SVG ?

I am designing the breadcrumb in one of my websites I work on. I am thinking of the separator of the navigation path. Should I use homepage > blog > post or homepage / blog / post or homepage | blog | post. I decided to use > but should I use the angle bracket or greater than symbol > or › or an SVG ?

SVG : Scalable Vector Graphics 🔗

I tried SVG, and the result is like this.

<svg aria-hidden="true" data-prefix="fas" data-icon="angle-left" class="inline-block text-gray-600 dark:text-gray-300" xmlns="http://www.w3.org/2000/svg" height="18"
width="18" viewBox="0 0 256 512" {{ app()->isLocale('en') ? 'transform=rotate(180)' : '' }}><path fill="currentColor" d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z" /></svg>

I used {{ app()->isLocale('en') ? 'transform=rotate(180)' : '' }} to rotate the vector symbol if the UI language is set to English As this website is bilingual.

I like how flexible and great to design and customize the look of SVG but I don’t like the re-check of language locale to rotate the SVG (which does not work in Safari btw). The other thing I hate about SVGs is that they are long, a.k.a use too much bytes (compared to symbols or HTML entities).

Symbols 🔗

I tried to use the simple symbol > but I need to check the language to use the correct symbol. The code is simple, like this.

{{ app()->isLocale('en') ? '>' : '<' }}

I sure like the succinct code but the bad thing is that we need to check the UI language before choosing which angle bracket to use/print. The other bad thing of using a symbol is that it is not good for designing and customization.

HTML Entity 🔗

I tried using HTML entity which is ›. The code is like this.

›

That’s it. No need to check the UI language as the web browser use a symbole for that HTML entity according to the layout direction of the HTML document. So, the HTML/CSS template can be cached and used for better performance.

The other good thing about using HTML entities is that they are succinct and very small which is efficient and performant. Reducing the size of DOM of the webpage is a great metric.

But HTML entities are tricky to design and customize their look.

Final Thoughts 🔗

If your design heavily customized, use SVG.

If your website is monolingual and need an efficient element, use a regular symbol.

If your website is multilingual and need an efficient element, use a HTML entity.

Here is a table of comparison for better conclusion.

In my case, I chose the HTML entity as it follows the document direction so no need to check for the user interface language. And it is efficient, too.

I hope this post helps you. If you know a person who can benefit from this information, send them a link of this post. If you want to get notified about new posts, follow me on YouTube , Twitter (x) , LinkedIn , Facebook , Telegram and GitHub .