How to combine SVG with CSS

Combining SVG with CSS can create rich visual effects and interactive experiences. Here are various ways to combine SVG with CSS:

1. Basic Style Application CSS can be directly applied to SVG elements, just like HTML elements.

svg
<svg width="200" height="200">
  <style>
    .circle {
      fill: blue;
      stroke: red;
      stroke-width: 2;
    }
    
    .rectangle {
      fill: green;
      stroke: black;
      stroke-width: 3;
    }
  </style>
  
  <circle class="circle" cx="100" cy="100" r="50" />
  <rect class="rectangle" x="20" y="20" width="80" height="60" />
</svg>

2. CSS Pseudo-classes Use CSS pseudo-classes to implement interactive effects.

svg
<svg width="200" height="200">
  <style>
    .interactive {
      fill: blue;
      transition: all 0.3s ease;
      cursor: pointer;
    }
    
    .interactive:hover {
      fill: red;
      transform: scale(1.1);
    }
    
    .interactive:active {
      fill: green;
    }
    
    .interactive:focus {
      outline: 3px solid #005fcc;
      outline-offset: 2px;
    }
  </style>
  
  <circle class="interactive" cx="100" cy="100" r="50" tabindex="0" />
</svg>

3. CSS Animation Use CSS @keyframes to implement animation effects.

svg
<svg width="200" height="200">
  <style>
    .rotating {
      transform-origin: center;
      animation: rotate 2s linear infinite;
    }
    
    .pulsing {
      animation: pulse 1s ease-in-out infinite;
    }
    
    @keyframes rotate {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }
    
    @keyframes pulse {
      0%, 100% { transform: scale(1); }
      50% { transform: scale(1.2); }
    }
  </style>
  
  <rect class="rotating" x="75" y="75" width="50" height="50" fill="blue" />
  <circle class="pulsing" cx="100" cy="100" r="30" fill="red" />
</svg>

4. CSS Variables Use CSS variables to implement dynamic styles.

svg
<svg width="200" height="200">
  <style>
    :root {
      --primary-color: #3498db;
      --secondary-color: #e74c3c;
      --stroke-width: 2px;
    }
    
    .dynamic {
      fill: var(--primary-color);
      stroke: var(--secondary-color);
      stroke-width: var(--stroke-width);
    }
    
    .dynamic:hover {
      --primary-color: #2ecc71;
    }
  </style>
  
  <circle class="dynamic" cx="100" cy="100" r="50" />
</svg>

5. External CSS Files Place SVG styles in external CSS files.

html
<!-- HTML file -->
<link rel="stylesheet" href="styles.css" />

<svg width="200" height="200">
  <circle class="styled-circle" cx="100" cy="100" r="50" />
</svg>

css
/* styles.css */
.styled-circle {
  fill: #3498db;
  stroke: #2c3e50;
  stroke-width: 3px;
  transition: all 0.3s ease;
}

.styled-circle:hover {
  fill: #e74c3c;
  transform: scale(1.1);
}

6. CSS Selectors Use various CSS selectors to precisely control SVG elements.

svg
<svg width="200" height="200">
  <style>
    /* ID selector */
    #unique-circle {
      fill: red;
    }
    
    /* Class selector */
    .blue-circle {
      fill: blue;
    }
    
    /* Attribute selector */
    circle[fill="green"] {
      stroke: black;
      stroke-width: 2;
    }
    
    /* Descendant selector */
    .group circle {
      fill: purple;
    }
    
    /* Pseudo-element */
    .special::after {
      content: '';
      /* SVG doesn't support pseudo-elements, but can be used for HTML elements within SVG */
    }
  </style>
  
  <circle id="unique-circle" cx="50" cy="50" r="20" />
  <circle class="blue-circle" cx="100" cy="50" r="20" />
  <circle fill="green" cx="150" cy="50" r="20" />
  
  <g class="group">
    <circle cx="50" cy="100" r="20" />
    <circle cx="100" cy="100" r="20" />
  </g>
</svg>

7. Responsive SVG Combine CSS media queries to implement responsive SVG.

svg
<svg width="100%" height="auto" viewBox="0 0 200 200">
  <style>
    @media (max-width: 768px) {
      .responsive-element {
        fill: blue;
      }
    }
    
    @media (min-width: 769px) {
      .responsive-element {
        fill: red;
      }
    }
  </style>
  
  <circle class="responsive-element" cx="100" cy="100" r="50" />
</svg>

8. CSS Transform Use CSS transform to implement transformation effects.

svg
<svg width="200" height="200">
  <style>
    .transformed {
      transition: transform 0.3s ease;
    }
    
    .transformed:hover {
      transform: translate(20px, 20px) rotate(45deg) scale(1.2);
    }
  </style>
  
  <rect class="transformed" x="75" y="75" width="50" height="50" fill="blue" />
</svg>

Best Practices:

• Prioritize CSS for animations and interactions
• Separate styles from structure
• Use CSS variables to improve maintainability
• Consider performance, avoid overusing complex animations
• Test cross-browser compatibility
• Use CSS transitions for smooth effects