/ Gists / Colorize SVG in CSS
On gists

Colorize SVG in CSS

SVG CSS trick

index.html Raw # 

<!DOCTYPE html>
<html lang="cs">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>SVG Mask Test</title>
        <style>
            .container {
                display: flex;
                gap: 20px;
                padding: 20px;
                flex-wrap: wrap;
            }

            .test-box {
                border: 1px solid #ccc;
                padding: 10px;
                text-align: center;
            }

            /* Test 1: External URL */
            .B1 {
                display: block;
                width: 100px;
                height: 100px;
                mask-image: url('stripe.svg');
                mask-position: center;
                mask-repeat: no-repeat;
                mask-size: contain;
                background: red;
            }

            /* Test 2: Inline SVG jako data URL */
            .B2 {
                display: block;
                width: 100px;
                height: 100px;
                /* https://yoksel.github.io/url-encoder/ */
                mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 184.63 236.36'%3E%3Cpath d='M172.33 0c-12.95 17.23-25.87 34.48-38.62 51.79C88.31 112.96 43.42 174.34 0 236.36h.01c49.58-59.38 95.23-122.99 142.83-183.22C156.9 35.48 170.78 17.75 184.63 0z'/%3E%3C/svg%3E");
                mask-position: center;
                mask-repeat: no-repeat;
                mask-size: contain;
                background: red;
            }

            /* Test 3: Inline SVG v HTML */
            .B3 {
                display: block;
                width: 100px;
                height: 100px;
            }

            .B3 svg {
                width: 100%;
                height: 100%;
                fill: red;
            }

            /* Test 4: Webpack prefix */
            .B4 {
                display: block;
                width: 100px;
                height: 100px;
                mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxODQuNjMgMjM2LjM2Ij48cGF0aCBkPSJNMTcyLjMzIDBjLTEyLjk1IDE3LjIzLTI1Ljg3IDM0LjQ4LTM4LjYyIDUxLjc5Qzg4LjMxIDExMi45NiA0My40MiAxNzQuMzQgMCAyMzYuMzZoLjAxYzQ5LjU4LTU5LjM4IDk1LjIzLTEyMi45OSAxNDIuODMtMTgzLjIyQzE1Ni45IDM1LjQ4IDE3MC43OCAxNy43NSAxODQuNjMgMHoiLz48L3N2Zz4=');
                mask-position: center;
                mask-repeat: no-repeat;
                mask-size: contain;
                background: red;
            }
        </style>
    </head>
    <body>
        <h1>Test SVG masek</h1>

        <div class="container">
            <div class="test-box">
                <h3>Test 1:  URL</h3>
                <div class="B1"></div>
                <p>mask-image: url("")</p>
            </div>

            <div class="test-box">
                <h3>Test 2: Data URL (bez fill)</h3>
                <div class="B2"></div>
                <p>Inline SVG jako data URL</p>
            </div>

            <div class="test-box">
                <h3>Test 3: Inline SVG</h3>
                <div class="B3">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 184.63 236.36">
                        <path d="M172.33 0c-12.95 17.23-25.87 34.48-38.62 51.79C88.31 112.96 43.42 174.34 0 236.36h.01c49.58-59.38 95.23-122.99 142.83-183.22C156.9 35.48 170.78 17.75 184.63 0z" />
                    </svg>
                </div>
                <p>SVG přímo v HTML</p>
            </div>

            <div class="test-box">
                <h3>Test 4: Base64 Data URL</h3>
                <div class="B4"></div>
                <p>Base64 encoded SVG</p>
            </div>
        </div>

        <div style="margin: 20px; padding: 20px; background: #f5f5f5">
            <h3>Debugging info:</h3>
            <p>Otevřete Developer Tools (F12) a podívejte se na Console a Network tab</p>
            <p>Pokud vidíte CORS chyby, problém je v cross-origin policy</p>
        </div>
    </body>
</html>