Почему -webkit-mask работает только с inline?

Question

[Анатолий]

Почему не работает маска, если указываю внешний файл?
Пример:
<div class="a"></div>

.a {width: 200px; height: 300px;
	  background-color: #ccc;
	  background: linear-gradient(45deg, blue, green);
	  -webkit-mask: url(check.svg); }

Вот так не работает! Но если я конвертирую svg в сервисе: https://yoksel.github.io/url-encoder/ru/
и вставлю так:

-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%23000000' d='M.9 10.2c1.6 1.4 4.9 5.5 5.6 8.9.1.5 1.1.6 1.4-.1 3.3-7.7 5.1-12.2 9.8-16.8C19.4.5 18.8 0 17.2.8c-3.7 2-7.5 7-10 11.7-2.7-2.4-3.5-2.5-5-3.1-1.6-.6-1.5.5-1.3.8z'/%3E%3C/svg%3E") no-repeat center;

то все работает!
PS. html-файл и svg-файл находятся в одной папке

Answer 1

[RAX7]

Если открыть html как файл, то не работает, а если использовать локальный сервер, то все ок

spoiler

Comments

[Анатолий]

Я вчера на сервер закидывал только svg и прописывал к нему путь и не помогало, а надо было оба файла закинуть. Странно конечно, все это, в спецификации ничего об этом не написано ((

Спасибо, за ответ.

[Kadzi]

RAX7 привет, если не трудно, хочу ваш коммент по данному вопросу Идеальный алгоритм вёрстки сайта?