LogoSVG URL кодировчик

SVG URL кодировчик

Ако искате да декодирате SVG обратно, можете да поставите кодирания SVG тук
Предварителен преглед

SVG може да се използва в CSS като URL, но без кодиране няма да работи на всички браузъри.
Ако към SVG се приложи кодиране с encodeURIComponent(), ще работи навсякъде.

SVG трябва да има атрибут xmlns: xmlns='http: //www.w3.org/2000/svg'.
Ако не съществува, ще бъде добавен автоматично

Кодираният SVG може да се използва в background, в border-image или в mask (на живо).

FAQ

Какво е SVG?

SVG е съкращение от Scalable Vector Graphics (мащабируема векторна графика). Използва се за дефиниране на векторна графика за Уеб в XML формат. Всеки елемент и атрибут в SVG файловете може да бъде анимиран.

Как да използваме SVG в CSS?

За да използвате SVG код директно в CSS, трябва първо да го кодирате. Можете да използвате този SVG URL Encoder инструмент или JavaScript функцията encodeURIComponent(). Кодиран SVG URI може да се използва с CSS свойствата background-image, border-image и mask чрез функцията url(). Пример: background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle r='50' cx='50' cy='50' fill='red'/%3E%3C/svg%3E");

Как да променим цвета на SVG в CSS?

За да промените цвета на SVG, можете да комбинирате CSS свойствата mask и background-color. Примерът по-долу ще промени цвета на SVG на синьо. Пример: mask: url(“data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle r='50' cx='50' cy='50' fill='currentColor'/%3E%3C/svg%3E”); background-color: blue;

Какво е URL?

URL (Uniform Resource Locator) е адресът на уникален ресурс в интернет. Той е един от ключовите механизми, използвани от браузерите за извличане на ресурси като HTML страници, CSS документи, изображения и т.н.

Как да кодираме URL?

За да кодирате URL адрес, можете да използвате функцията encodeURIComponent(), която кодира URI чрез замяна на всяко срещане на определени знаци с един, два, три или четири escape символа, представляващи UTF-8 кодирането на знака. В сравнение с encodeURI(), тази функция кодира повече знаци, включително тези, които са част от синтаксиса на URI.

Как да декодираме URL?

За да декодирате URL, можете да използвате функцията decodeURIComponent(), която декодира URI, като третира всяка escape последователност от вида %XX като една кодова единица UTF-8 (един байт). В UTF-8 броят на водещите единични битове в първия байт (0 за едно-байтови ASCII знаци, 2, 3 или 4) показва броя байтове в знака.

Примери за кодиран SVG

Като фон
С маска
В рамката

Таблица за конвертиране от SVG към CSS

SVGCSS
<svg><circle r="50" cx="50" cy="50" fill="tomato"/><circle r="41" cx="47" cy="50" fill="orange"/><circle r="33" cx="48" cy="53" fill="gold"/><circle r="25" cx="49" cy="51" fill="yellowgreen"/><circle r="17" cx="52" cy="50" fill="lightseagreen"/></svg>background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle r='50' cx='50' cy='50' fill='tomato'/%3E%3Ccircle r='41' cx='47' cy='50' fill='orange'/%3E%3Ccircle r='33' cx='48' cy='53' fill='gold'/%3E%3Ccircle r='25' cx='49' cy='51' fill='yellowgreen'/%3E%3Ccircle r='17' cx='52' cy='50' fill='lightseagreen'/%3E%3C/svg%3E");
<svg><rect x="10" y="10" width="30" height="30"/></svg>background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='10' y='10' width='30' height='30'/%3E%3C/svg%3E");
<svg><circle cx="25" cy="75" r="20"/></svg>background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='25' cy='75' r='20'/%3E%3C/svg%3E");
<svg><ellipse cx="75" cy="75" rx="20" ry="5"/></svg>background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cellipse cx='75' cy='75' rx='20' ry='5'/%3E%3C/svg%3E");
<svg><line x1="10" x2="50" y1="110" y2="150" stroke="black" stroke-width="5"/></svg>background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='10' x2='50' y1='110' y2='150' stroke='black' stroke-width='5'/%3E%3C/svg%3E");
<svg><polyline points="60, 110 65, 120 70, 115 75, 130 80, 125 85, 140 90, 135 95, 150 100, 145"/></svg>background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='60, 110 65, 120 70, 115 75, 130 80, 125 85, 140 90, 135 95, 150 100, 145'/%3E%3C/svg%3E");
<svg><polygon points="50, 160 55, 180 70, 180 60, 190 65, 205 50, 195 35, 205 40, 190 30, 180 45, 180"/></svg>background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='50, 160 55, 180 70, 180 60, 190 65, 205 50, 195 35, 205 40, 190 30, 180 45, 180'/%3E%3C/svg%3E");
<svg><polygon points="12,2 15,10 24,10 17,15 19,24 12,19 5,24 7,15 0,10 9,10" fill="gold"/></svg>background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='12,2 15,10 24,10 17,15 19,24 12,19 5,24 7,15 0,10 9,10' fill='gold'/%3E%3C/svg%3E");
<svg><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3C/svg%3E");
<svg><path d="M9 16.17l-4.88-4.88L2 13.41 9 20.41l13-13-1.41-1.41z"/></svg>background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 16.17l-4.88-4.88L2 13.41 9 20.41l13-13-1.41-1.41z'/%3E%3C/svg%3E");
<svg><path d="M 10 10 C 20 20, 40 20, 50 10" stroke="black" fill="transparent"/></svg>background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M 10 10 C 20 20, 40 20, 50 10' stroke='black' fill='transparent'/%3E%3C/svg%3E");
<svg><path d="M 70 10 C 70 20, 110 20, 110 10" stroke="black" fill="transparent"/></svg>background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M 70 10 C 70 20, 110 20, 110 10' stroke='black' fill='transparent'/%3E%3C/svg%3E");
<svg><path d="M 130 10 C 120 20, 180 20, 170 10" stroke="black" fill="transparent"/></svg>background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M 130 10 C 120 20, 180 20, 170 10' stroke='black' fill='transparent'/%3E%3C/svg%3E");
<svg><path d="M 10 60 C 20 80, 40 80, 50 60" stroke="black" fill="transparent"/></svg>background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M 10 60 C 20 80, 40 80, 50 60' stroke='black' fill='transparent'/%3E%3C/svg%3E");
<svg><path d="M 70 60 C 70 80, 110 80, 110 60" stroke="black" fill="transparent"/></svg>background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M 70 60 C 70 80, 110 80, 110 60' stroke='black' fill='transparent'/%3E%3C/svg%3E");
<svg><path d="M 130 60 C 120 80, 180 80, 170 60" stroke="black" fill="transparent"/></svg>background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M 130 60 C 120 80, 180 80, 170 60' stroke='black' fill='transparent'/%3E%3C/svg%3E");
<svg><path d="M 10 110 C 20 140, 40 140, 50 110" stroke="black" fill="transparent"/></svg>background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M 10 110 C 20 140, 40 140, 50 110' stroke='black' fill='transparent'/%3E%3C/svg%3E");
<svg><path d="M 70 110 C 70 140, 110 140, 110 110" stroke="black" fill="transparent"/></svg>background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M 70 110 C 70 140, 110 140, 110 110' stroke='black' fill='transparent'/%3E%3C/svg%3E");
<svg><path d="M 130 110 C 120 140, 180 140, 170 110" stroke="black" fill="transparent"/></svg>background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M 130 110 C 120 140, 180 140, 170 110' stroke='black' fill='transparent'/%3E%3C/svg%3E");
<svg><path d="M 10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" stroke="black" fill="transparent"/></svg>background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M 10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80' stroke='black' fill='transparent'/%3E%3C/svg%3E");