CSS? ?? SVG? ??????? ?? SVG? HTML? ?? ??? ?? ???????. 1. Inline SVG? ???? ?? ? ?? ?? ??? ?? ???? CSS? ?? ???? ?? ? ? ??? ?? SVG? ?? ?? ?? ??? ?? ??? ??? ? ?????. 2. .class : ??? ?? ?? CSS ??? ???? ??? ??? ????? ?? ??? ???? ???? ??? ???? ???? ???? ???? ??? ??????. 3. ??? ??? ???? ???? ???? ??? ??? ?? ?? ? ?? ?????? ?????. 4. SVG ???? ????? ?? ? ? ??? SVG * {Fill : None; ??? : ??; } ??? ?? ??? ??? ??. ??? ?? ???? ??? ? ??? CSS? ????? ???? SVG ???? ?? ? ? ????.

SVG? ?? ?? ? (??, ???, ??)? ??? ? ?? ? ??? HTML ??? ????? CSS? ???? ??? ? ??? ????. ???? ? ???? ???? ?? ?? ? ? ????. ??? SVG? ???? ???? ??? ????? ??? ????. ??? ? ? ?? gotchas? ????.

??? SVG ? ?? SVG

???? SVG? ????? ??? ???? ??? ??? ??? ??? ????.

• ??? SVG : ?? ?? <svg></svg> ??? HTML? ?? ?? ?? ?? ?????. ??? ? ??? CSS? ?? ?? ( <path></path> , <circle></circle> ?)? ??? ? ? ??? ????.
• ?? SVG : CSS? <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/175211922987577.png" class="lazy" alt="CSS ??? ?? ?? ??? ?? ??? (SVG)" > ?? ?? ?? ???? ?? SVG????? ?? ?? ??? ?? ??? ? ? ????. ? ?? ??, ?? ?? ??? ??? ?? ??? ??? ? ?? ? ? ????.

??? SVG ??? ??, ????? ?? ?? ??? ?? ??? ??? ???? ????? ??????.

CSS? ??? SVG ?? ????

SVG? ?????? ????? ???? ?? ??? ?? HTML? ?? ?? ? ? ??????.

?? ??, ?? ??? ???? ??? ????? ????? ? ????.

 <SVG>
  <path class = "logo-main"d = "m10 10 ..." />
</svg>

??? ??? CSS?? :

 .Logo-Main {
  ??? : #333;
}

.Logo-Main : ?? {
  ??? : #09F;
}

? ?? ??? ?? :

• ??? ???? color ?? background-color ??? fill ??????.
• stroke ?? ???? ???? stroke-width ??? ?????.
• ?? ?? ? ????? ??? ??? ????? ? ?? ????.

?? ?? ????? SVG? ???? ?? CSS ??? ?? ??? ???? ? ????.

???? ??? ???? ?????

HTML? ????? SVG ??? ???? ???? ???? ???? ???? ??? ? ? ????.

SVG? ?? ??? ??? ?? ? ?????.

 <SVG>
  <Circle Class = "DOT ??"CX = "50"CY = "50"r = "10" />
  <circle class = "dot secondary"cx = "100"cy = "50"r = "10" />
</svg>

CSS?? ??? ??? ???? ?? ? ? ????.

 .dot {
  ?? : 0.3 ?? ?? ? ???.
}

.??? {
  ??? : ???;
}

.secondary {
  ??? : ???;
}

? ?? ? :

• ??? ??? ???? ?? ???? ???? ???????.
• SVG? ????? ???? ??? ?? ??? ???? ???? ?? ??????.
• BEM ?? ?? ??? ?? ??? ??? ???? ? ??? ? ? ????.

? ???? ?? SVG? ?? ?????? ??? ???? ?? ?? ? ? ????????.

???? ??? ??????

SVG ??? ????? ???? ???? ? ???, ?? ????? ??? ?? ?????.

?? ??, <svg> ?? ??? fill ??? ???? ?? fill ?? ?? ??? ???? ?????. ??? ?? ? ? ????.

 svg {
  ??? : CurrentColor;
}

?? ?? ?? ??? color ??? ??? ? ??? SVG? ?????.

??? ??? ?? ??? ????? ???? ?????? ???? ??? ??? ?? ??? ??? ? ??? ?????. ?? ???? ??? ? ?? ???? ????? ????.

 svg * {
  ??? : ??;
  ??? : ??;
}

????? ???? ???? ??? ?? ???? ?????.

????? ?? ??. CSS? ??? SVG ????? ?? ??? ?? ?? ????? SVG ??? CSS ??? ???? ??? ??? ???? ?? ? ?????? ???????.

? ??? CSS ??? ?? ?? ??? ?? ??? (SVG)? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!