Can I set d="xxxx" in the CSS of "path" so that I can save some space in the HTML?

Question

I have many SVG in one HTML page.

Here is how it looks like:

<div>
  <svg><path d="M230 ...." /></svg>
</div>
<section id="el2">
  <svg><path d="M230 ...." /></svg>
</section>
<div id="el3">
  <svg><path d="M230 ...." /></svg>
</div>
<p id="el4">
  <svg><path d="M230 ...." /></svg>
</p>
....

The svg with same path details are in many places on this page.

Without JavaScript, how can I avoid repeating the svg code? Is there any way like this:

svg path {d:"M230 .... "}

I have tried it but it's not working. What is the best way to improve this?

Thanks

Basically I don't believe you can. I do not believe variables work in SVG such as you require. — Paulie_D, Sep 09 '22 at 07:00
Depending on the path you may be able to use defs for this though but it will depend on the actual SVGs in use. — Paulie_D, Sep 09 '22 at 07:01
I asked so because I saw `fill` or `stroke` properties can be defined via CSS. It'd be great if we can do with `d:` :) — AGamePlayer, Sep 09 '22 at 07:37

Alex Berger · Accepted Answer · 2022-09-09T14:32:28.057

You could create your own SVG font, there are online tools for that like Fontello

A note to SVG Font compatibility (thanks to @herrstrietzel)
SVG font's are deprecated and only supported by older browsers and Safari. To make sure your font's are working, also include WOFF(2) and / or TTF files in your font face for maximum compatibility. Fontello is already providing them, but there are other converters available in case you only have it as svg.

Create a new font-face for it in CSS, you actually get the CSS code from the generator ready to copy & paste as well as some other usefull CSS to have ready to use classes.

@font-face {
  font-family: 'your-font-name';
  src: url('../font/your-font-name.eot?34609786');
  src: url('../font/your-font-name.eot?34609786#iefix') format('embedded-opentype'),
       url('../font/your-font-name.woff2?34609786') format('woff2'),
       url('../font/your-font-name.woff?34609786') format('woff'),
       url('../font/your-font-name.ttf?34609786') format('truetype'),
       url('../font/your-font-name.svg?34609786#fontello') format('svg');
  font-weight: normal;
  font-style: normal;
}

[class^="icon-"]:before, [class*=" icon-"]:before {
  font-family: "fontello";
  font-style: normal;
  font-weight: normal;
  speak: never;

  /* More properties here, i removed them */
}

.icon-download:before { content: '\e804'; }

Each icon gets it's own code, so you can have a ton of different SVGs in your font.

Then you can use it in CSS :after and :before as content: '\e800'; (e800 is just an example, may be different for you).

Having that in your CSS, in your HTML you could then use it as following:

<div>
  <i class="icon icon-download"></i>
</div>
<section id="el2">
  <i class="icon icon-download"></i>
</section>
<div id="el3">
  <i class="icon icon-download"></i>
</div>
<p id="el4">
  <i class="icon icon-download"></i>
</p>

So overall you end up with less code in your html and the user only has to download the SVG once via the Font. And also a huge plus, new icons are added extremely fast this way.

Do I have to upload the created fonts externally? Can I have them inline coded? — AGamePlayer, Sep 09 '22 at 07:13
You could base64 encode the font and use them in your css with `src: url(data:image/svg+xml;base64,d09GRgABAAAAAGy …) format('svg');` --- Depending on the font and numbers of SVGs you are using, it may increase your CSS files size significantly. Which is slowing down the downloading process of your CSS file. — Alex Berger, Sep 09 '22 at 07:22
I have never tried to include a font with base64 before, any reference for that. BTW, I just have 2 or 3 icons so the CSS size should be fine. Thanks a lot. — AGamePlayer, Sep 09 '22 at 07:36
This [SO Question](https://stackoverflow.com/questions/26867893/converting-and-rendering-web-fonts-to-base64-keep-original-look) could help you with base64 fonts. — Alex Berger, Sep 09 '22 at 08:33
Caution: **svg fonts are no longer supported**. For loading the font via data-url you need to base64 encode either the `woff2`, `woff` or `ttf` file. However the `svg` font file can used in many generators like fontello or icomoon to (re)import icon collections. So it's still relevant/handy as an interchange format for some apps. — herrstrietzel, Sep 09 '22 at 14:11

score 1 · Answer 2 · answered Sep 09 '22 at 13:53

CSS path() function

Actually, you can set or change d attributes in css via path() function

So referring to your example, you just need to wrap the path data string in this function like so:

svg path {d: path("M230 .... ")}

svg{
  height:10em;
}

.pathIcon{
  d: path("M33.16,28.12h-5.2v13h-3.44v-16.72l-7.72-8.72l-7.72,8.72v16.72h-3.44v-13h-5.24l16.4-17.4Z");
  fill:red;
}

<svg class="icon" viewBox="0 0 34 48">
  <path class="pathIcon" />
</svg>

Alternative: external `<use>` references

This approach will allow you to store multiple assets within one svg and load them from an external svg.

external svg content: "icons.svg"

<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0">
  <symbol id="icon-home" viewBox="0 0 34 48">
    <path d="M33.16,28.12h-5.2v13h-3.44v-16.72l-7.72-8.72l-7.72,8.72v16.72h-3.44v-13h-5.24l16.4-17.4Z" />
  </symbol>
  <symbol id="icon-close" viewBox="0 0 27 48">
    <path d="M26.16,17.92l-10.44,10.44l10.44,10.44l-2.44,2.44l-10.44-10.44l-10.44,10.44l-2.44-2.44l10.44-10.44l-10.44-10.44l2.44-2.44l10.44,10.44l10.44-10.44Z" />
  </symbol>
</svg>

HTML usage

<svg class="icon" viewBox="0 0 27 48">
 <use href="icons.svg#icon-close" />
</svg>

<svg class="icon" viewBox="0 0 34 48">
 <use href="icons.svg#icon-home" />
</svg>

This way you can store lots of icons in one file without the need of inlining them directly. You can still style your graphics via css.

Inline svg example (external svgs won't work in snippets)

svg{
  height:10em;
}

.icon-home{
fill:red;
}

.icon-close{
stroke:green;
stroke-width:1px;
fill:none
}

<svg class="icon icon-close" viewBox="0 0 27 48">
 <use href="#icon-close" />
</svg>

<svg class="icon icon-home" viewBox="0 0 34 48">
 <use href="#icon-home" />
</svg>

<!-- external svg -->
<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0">
  <symbol id="icon-home" viewBox="0 0 34 48">
    <path d="M33.16,28.12h-5.2v13h-3.44v-16.72l-7.72-8.72l-7.72,8.72v16.72h-3.44v-13h-5.24l16.4-17.4Z" />
  </symbol>
  <symbol id="icon-close" viewBox="0 0 27 48">
    <path d="M26.16,17.92l-10.44,10.44l10.44,10.44l-2.44,2.44l-10.44-10.44l-10.44,10.44l-2.44-2.44l10.44-10.44l-10.44-10.44l2.44-2.44l10.44,10.44l10.44-10.44Z" />
  </symbol>
</svg>

oh, this answer is the best but I cant revote. – AGamePlayer Sep 10 '22 at 06:09 — AGamePlayer, Sep 10 '22 at 06:09

score 0 · Answer 3 · answered Sep 09 '22 at 11:01

If you just want the same SVG image to appear at the beginning of multiple HTML elements, then it might be more convenient to use a ::before CSS rule. Here's an example:

.decorated::before {
  content:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"%3E%3Cpath d="M0 0 10 5 0 10 5 5Z" fill="blue"/%3E%3C/svg%3E');
  display:inline-block;
  width:0.75em;
  height:0.75em;
  margin-right:0.25em;
}

<h1 class="decorated">Lorem ipsum</h1>
<h2 class="decorated">Dolor sit amet</h2>
<h3 class="decorated">Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</h3>
<h4 class="decorated">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</h4>
<p class="decorated">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<p class="decorated">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

Can I set d="xxxx" in the CSS of "path" so that I can save some space in the HTML?

3 Answers3

CSS path() function

Alternative: external <use> references

Alternative: external `<use>` references