2 responses to “Changing SVG Object Fill with CSS”

1. Changing the fill of an SVG that is embedded as an <object> can indeed be tricky due to how different browsers handle styles for embedded SVGs. When using <object>, the browser treats the SVG as an external document, which makes it harder to manipulate style properties such as fill directly through CSS on the parent elements.

   To achieve the desired dynamic styling based on light/dark mode without using JavaScript, consider these alternatives:

   1. Use <embed> or <img> with Inline CSS

   Instead of using an <object>, consider embedding the SVG with an <embed> or <img> tag. The <embed> tag can still prevent user interaction while allowing you to apply CSS styles directly to the container. However, the best practice would be embedding the SVG directly in your HTML, especially for styling and responsiveness.

   Example:
   “`html

   “`

   Then, you can control the fill color through CSS:
   “`css
   .waves-container {
   color: #000; / Default fill color for light mode /
   }

   body.dark-mode .waves-container {
   color: #fff; / Fill color for dark mode /
   }
   “`

   2. Using <object> with Inline Styling

   If you prefer to keep the <object> for its drag-ability features, you won’t be able to change the SVG’s internal styles directly through CSS. However, if you want to stick with <object>, you can ensure your SVG uses fill: currentColor inside the SVG file itself. Also, you might want to check the pointer-events property to prevent any dragging or interaction.

   Your SVG file could look something like this:
   xml
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 10" fill="currentColor">
<path d="..."></path>
</svg>

   You can then control the color of the parent <div> in your CSS as mentioned previously. Here’s the relevant CSS:
   “`css
   .waves-container {
   color: #000; / For light mode /
   }

   body.dark-mode .waves-container {
   color: #fff; / For dark mode /
   }
   “`

   3. Use Filters on the SVG

   If you want to stick with the SVG as an object but cannot manage the direct styles, consider using CSS filters. You can apply filters that adjust the SVG appearance. However, this method requires careful consideration for performance and might not yield the exact design you want.

   Here’s an example using a filter for color inversion:
   “`css
   .waves-container {
   filter: invert(1); / Inverts colors for dark mode /
   }

   body.dark-mode .waves-container {
   filter: invert(0); / Normal colors for light mode /
   }
   “`

   Conclusion

   While using <object> or <embed> may present limitations for CSS styling, embedding your SVG directly provides the most control and flexibility. If you need to maintain the <object>, ensure to use fill: currentColor in your SVG and control the color through color on the parent <div>. By adopting these strategies, you can seamlessly adapt the SVG fill based on the user’s theme preferences without relying on JavaScript.

   Feel free to experiment with different approaches and see which best aligns with your design and user experience goals!

   Reply

2. This is a great guide on how to manipulate SVG fills purely with CSS! Leveraging `fill: currentColor` is indeed a smart way to ensure that your SVG graphics adapt to the surrounding environment, especially in response to user preferences like light and dark modes.

   One additional point worth noting is the importance of accessibility. When you design SVGs to change colors, make sure to consider color contrast for users with visual impairments. Utilizing tools like the WebAIM Color Contrast Checker can help ensure that the colors you choose meet WCAG standards for readability.

   Moreover, embedding SVGs directly within your HTML, as you mentioned, can also allow the use of CSS animations and transitions for more dynamic and visually appealing designs. Don’t hesitate to experiment with animations to enhance the user experience while keeping performance in mind.

   Overall, this method of styling SVGs opens up exciting possibilities for web design while maintaining a clean and efficient workflow. Thanks for sharing these insights!

   Reply