{"id":137145,"date":"2024-10-14T14:58:15","date_gmt":"2024-10-14T09:28:15","guid":{"rendered":"https:\/\/www.vskills.in\/certification\/tutorial\/?page_id=137145"},"modified":"2024-10-16T16:06:36","modified_gmt":"2024-10-16T10:36:36","slug":"coloring-svgs-with-mask-image-svg","status":"publish","type":"page","link":"https:\/\/www.vskills.in\/certification\/tutorial\/coloring-svgs-with-mask-image-svg\/","title":{"rendered":"Coloring SVGs with mask-image | SVG"},"content":{"rendered":"\n

The mask-image CSS property allows you to apply a mask to an element, revealing only the portions that correspond to transparent areas of the mask image. This can be used to create interesting visual effects, including coloring SVGs.<\/p>\n\n\n\n

Basic Syntax<\/strong><\/p>\n\n\n\n

CSS<\/p>\n\n\n\n

.element {<\/p>\n\n\n\n

  mask-image: url(mask.png);<\/p>\n\n\n\n

}<\/p>\n\n\n\n

Using a Mask Image to Color an SVG<\/strong><\/p>\n\n\n\n

    \n
  1. Create a mask image:<\/strong> Create a black and white image where white areas will be visible and black areas will be masked.<\/li>\n\n\n\n
  2. Apply the mask:<\/strong> Use the mask-image property on the SVG element to apply the mask.<\/li>\n<\/ol>\n\n\n\n

    Example<\/strong><\/p>\n\n\n\n

    HTML<\/p>\n\n\n\n

    <svg width=”200″ height=”200″><\/p>\n\n\n\n

      <circle cx=”100″ cy=”100″ r=”50″ fill=”white” \/><\/p>\n\n\n\n

    <\/svg><\/p>\n\n\n\n

    CSS<\/p>\n\n\n\n

    svg {<\/p>\n\n\n\n

      mask-image: url(mask.png);<\/p>\n\n\n\n

    }<\/p>\n\n\n\n

    Creating a Color Mask<\/strong><\/p>\n\n\n\n

    To create a colored mask, you can use a gradient or a solid color.<\/p>\n\n\n\n

    Example (using a gradient)<\/strong><\/p>\n\n\n\n

    CSS<\/p>\n\n\n\n

    .element {<\/p>\n\n\n\n

      mask-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));<\/p>\n\n\n\n

    }<\/p>\n\n\n\n

    Example (using a solid color)<\/strong><\/p>\n\n\n\n

    CSS<\/p>\n\n\n\n

    .element {<\/p>\n\n\n\n

      mask-image: url(mask.png);<\/p>\n\n\n\n

      mask-color: red;<\/p>\n\n\n\n

    }<\/p>\n\n\n\n

    Responsive Considerations<\/strong><\/p>\n\n\n\n