Changing Colors of SVG Images in Elementor

Introduction to SVG

• SVG stands for Scalable Vector Graphics.
• Unlike other image formats, SVGs use vector data instead of unique pixels.

Overview of Methods

• Mark will cover four different methods to change colors of SVG images in Elementor, starting from easier to more complex.

Method 1: Using the Icon Widget

• Widget: Icon Widget in Elementor.
• Upload SVG: Download the SVG (e.g., from Icon Scout) and upload it.
• Color Modification:
  • If the SVG does not have hardcoded colors, you can easily change the primary color and hover color within Elementor settings.
  • Customization options:
    • Select primary color.
    • Set hover color and add hover animation.
• Notes:
  • This method is the easiest.
  • Hardcoded colors in SVG may prevent color changes using this method.

Method 2: Regular Image Widget

• Widget: Normal Image Widget in Elementor.
• Image Type: SVG logo image.
• CSS Filters:
  • Use CSS filters to change color on hover.
  • Adjust contrast and brightness settings.
    • Setting contrast to 200 results in a black image.
    • Contrast set to 0 removes color, revealing original blue.
• Limitations:
  • Fewer color adjustment options compared to the Icon Widget.

Method 3: Using HTML Code

• Direct Code Editing:
  • SVG images consist of vector data represented in code.
  • Copy and paste SVG code into an HTML widget in Elementor.
• Path Fill Color:
  • If paths have fill attributes with specific colors, removing those allows for CSS color styling.
• Custom CSS (for Elementor Pro):
  • Use custom CSS to apply styles to the SVG.
  • Example CSS: selector svg { fill: your-color; }
  • Hover effect can also be added with CSS.

Method 4: Hyperlinking an SVG with CSS Filter

• Creating Links Using HTML:
  • Wrap the SVG code with an <a> tag to create hyperlinks.
• CSS Filter for Hover:
  • Generate CSS filter code using online tools.
  • Example of generating code for color changes:
    • Enter target color to get the computed code.
• Implementation:
  • Apply the filter using custom CSS: selector svg:hover { fill: target-hover-color; }
• Hyperlink:
  • Ensure the SVG is clickable on hover.

Conclusion

• Each method has its advantages depending on the complexity of the SVG and specific needs in Elementor.
• Subscribe to channels for more tutorials.