Shula Shula - 4 months ago 23
CSS Question

Is svg icon belong to style layer and view layer?

My team are shifting to svg icons.

We use to define the icons in css style classes, and are now considering whether SVG icons should be implemented as view component rendering svg markup (instead of html). This should allow for better reuse svg by changing dimensions, color etc. On the other hand this takes the icons out of the styling domain and any style change will cause code change (and not only css change).

Whats is the right way (if there any) to work with svg icons, control size and colors, and still save style layer and view layer?

Answer

SVG editors sometimes put style information inline, but style information for SVGs can also be provided inside <style> tags, as usual CSS.

If the SVG is in your DOM (the simplest way to do this, is to write the SVG directly into your HTML) the SVG can be formatted directly from your usual CSS file:

p {
  color: #666;
}

.blueTriangle {
  fill: lightblue;
  stroke: #666;
  stroke-width: 8;
}
<p> This is usual text in HTML p tags. </p>
<p> The next thing is embedded SVG, styled by usual CSS: </p>

<svg width="250" height="120">
  <path class="blueTriangle" d="M150 20 L130 90 L170 90 Z" />
</svg>

With transform also scaling and rotations can be done, showing different components can be accomplished via display, visibility or opacity with different implications.

Changing paths themselves would be considered as changing the content of the file and can be done via JavaScript. Therefore the separation of style an content can still be preserved.

Comments