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

AGamePlayer 0
Viewed 2108

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

svg css html
3 Answers

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.

Hoargarth0

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>

herrstrietzel0

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>

r3mainer0
Related