How do I convert these SVG properties into CSS declarations?

Question

How do I convert these SVG properties into CSS declarations?

188 views Asked by Malekai At 31 May 2020 at 12:26

I have the following HTML:

<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <circle cx="10.5" cy="10.5" r="7.5"></circle>
  <line x1="21" y1="21" x2="15.8" y2="15.8"></line>
</svg>

The HTML looks clunky at best, how do I convert it's properties into CSS?

For example:

#search-svg {
  width: 20;
  height: 20;
  viewBox: 0 0 24 24;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round
}

I know that the width, height and fill properties exist and can be converted into CSS.

However I don't know how the other properties work or what their CSS equivalents are, and a quick search on caniuse yeilds no results for CSS properties beginning with stroke.

Thank you.

Original Q&A

There are 2 answers

Roy Chong On 31 May 2020 at 12:36

If you want to change the svg css, you should also change the child tag css.

 #search-svg {
   width: 50px;
   height: 50px;

 }
 #search-svg circle {
  fill:none;
  stroke: currentColor;
    stroke-width: 3;
    stroke-linecap: round;
   stroke-linejoin: round
 }
 #search-svg line{
  stroke: currentColor;
  stroke-linecap: round;
    stroke-linejoin: round
 }

<!DOCTYPE html>
<html>
<head>
 <title>Test</title>
</head>
<body>
 <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" id ="search-svg">
   <circle cx="10.5" cy="10.5" r="7.5"></circle>
   <line x1="21" y1="21" x2="15.8" y2="15.8"></line>
 </svg>
</body>
</html>

**Krzysztof Golasik** · Accepted Answer · 2020-05-31T12:35:20+00:00

I checked it and almost all properties from your example works, you have to remember that size properties needs unit eg. px.

svg {
  width: 40px;
  height: 40px;
  fill: red;
  stroke: green;
  stroke-width: 4px;
  stroke-linecap: round;
  stroke-linejoin: round;
}

circle {
  cx: 12px;
  cy: 13px;
  r: 6px;
}

Also found an source of more data about SVG properties https://css-tricks.com/svg-properties-and-css/

TechQA.

How do I convert these SVG properties into CSS declarations?

There are 2 answers

Related Questions in HTML

Related Questions in CSS

Related Questions in SVG

Related Questions in CODE-SEPARATION

Popular Questions

Popular Tags

Trending Questions