Advanced search

Colorize svg with css

  1. varianta

    <img src="black-image.svg" class="colorize-img" alt="SVG Image" />

    <style>
      .colorize-img {
        filter: invert(14%) sepia(92%) saturate(750%) hue-rotate(328deg) brightness(93%) contrast(101%);
      }
    </style>
    use: [https://angel-rs.github.io/css-color-filter-generator/

    1. Inline SVG with fill or stroke

    If the SVG code is included directly in your HTML, you can use CSS to change the color by targeting the fill or stroke attributes.

    Example:

    html

    • Use fill for elements filled with color (e.g., rect, circle).

    • Use stroke for elements that have an outline (e.g., lines, paths).

    2. Using an External SVG with the filter Property

    If the SVG is used as an img tag and cannot be edited inline, you can use the filter property to apply a colorization effect. This approach works by applying a color overlay on the entire image.

    Example:

    html
    <img src="image.svg" class="colorize-img" alt="SVG Image" /> <style> .colorize-img { filter: invert(24%) sepia(86%) saturate(745%) hue-rotate(330deg) brightness(96%) contrast(91%); } </style>

    You can generate specific color filter values using online tools.

    3. Using mask or background

    This method is useful for applying colors to SVGs used as background images.

    Example with mask:

    html
    <div class="colored-svg"></div> <style> .colored-svg { width: 100px; height: 100px; background: red; /* Desired color */ -webkit-mask: url('image.svg') no-repeat center; mask: url('image.svg') no-repeat center; -webkit-mask-size: contain; mask-size: contain; } </style>

    Example with background:

    html
    <div class="svg-bg"></div> <style> .svg-bg { width: 100px; height: 100px; background-image: url('image.svg'); background-color: red; /* Background color to show through the SVG */ -webkit-mask: url('image.svg') no-repeat center; mask: url('image.svg') no-repeat center; } </style>

    4. Using CSS Variables for Reusable Color Changes

    Inline SVGs can use CSS variables to make color changes reusable and dynamic.

    Example:

    html

    Notes:

    • Inline SVGs give you the most flexibility for styling.

    • For external SVGs, filter or mask are good alternatives when you cannot edit the SVG directly.

    • If you have a choice, prefer inline SVGs when you anticipate the need for frequent customization.

    Let me know which method you'd like more details about!

     
    You said:
    use method 2 and filter from black to this color #E5097F
     
    ChatGPT said:

    To use Method 2 with a filter to colorize a black SVG image to #E5097F, you can calculate the filter values for the desired color. Here's how you can do it:

    HTML & CSS Example:

    html
    <img src="black-image.svg" class="colorize-img" alt="SVG Image" /> <style> .colorize-img { filter: invert(14%) sepia(92%) saturate(750%) hue-rotate(328deg) brightness(93%) contrast(101%); } </style>

    Explanation:

    1. Base Color: Start with the black SVG image (#000000).

    2. Target Color: The desired color is #E5097F (a pinkish shade).

    3. Filter Values:

      • invert(14%): This adjusts the base black color.

      • sepia(92%): Adds richness and warmth to the hue.

      • saturate(750%): Intensifies the color vibrancy.

      • hue-rotate(328deg): Shifts the hue to match the target pink color.

      • brightness(93%): Controls the overall lightness.

      • contrast(101%): Adjusts the contrast slightly for better matching.

    These filter values are calculated using online tools or trial-and-error to closely match the target color.

    How to Generate Filters for Other Colors:

    You can use an online tool like CSS Filter Generator by Angelos Chalaris (search for it) to compute filter values for any color.

     

  2. varianta

Rate this FAQ

∅ 0 (0 Votes)

Related entries