Can I set d="xxxx" in the CSS of "path" so that I can save some space in the HTM-CodePudding

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

CodePudding user response：

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 ></i>
</div>
<section id="el2">
  <i ></i>
</section>
<div id="el3">
  <i ></i>
</div>
<p id="el4">
  <i ></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.

CodePudding user response：

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,');
  display:inline-block;
  width:0.75em;
  height:0.75em;
  margin-right:0.25em;
}

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

CodePudding user response：

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  viewBox="0 0 34 48">
  <path  />
</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  viewBox="0 0 27 48">
 <use href="icons.svg#icon-close" />
</svg>

<svg  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  viewBox="0 0 27 48">
 <use href="#icon-close" />
</svg>

<svg  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>

CSS path() function

Alternative: external <use> references

Alternative: external `<use>` references