Меню

Для примера использую SVG файл логотипа из шапки. Исходный код файла преобразую в конвертере и вставляю в css получившуюся строку backgound: url('строка из конвертера')

Исходный код файла SVG:


<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M30.336 22.4H31.586C31.586 21.7096 31.0264 21.15 30.336 21.15V22.4ZM17.248 2.75C16.5576 2.75 15.998 3.30964 15.998 4C15.998 4.69036 16.5576 5.25 17.248 5.25V2.75ZM29.086 38.048C29.086 38.7384 29.6456 39.298 30.336 39.298C31.0264 39.298 31.586 38.7384 31.586 38.048H29.086ZM11.328 8.318C10.6376 8.318 10.078 8.87764 10.078 9.568C10.078 10.2584 10.6376 10.818 11.328 10.818V8.318ZM5.25 11.072C5.25 10.3816 4.69036 9.822 4 9.822C3.30964 9.822 2.75 10.3816 2.75 11.072H5.25ZM33.536 22.4V21.15C32.8456 21.15 32.286 21.7096 32.286 22.4H33.536ZM46.624 5.25C47.3144 5.25 47.874 4.69036 47.874 4C47.874 3.30964 47.3144 2.75 46.624 2.75V5.25ZM32.286 38.048C32.286 38.7384 32.8456 39.298 33.536 39.298C34.2264 39.298 34.786 38.7384 34.786 38.048H32.286ZM52.544 10.818C53.2344 10.818 53.794 10.2584 53.794 9.568C53.794 8.87764 53.2344 8.318 52.544 8.318V10.818ZM61.122 11.072C61.122 10.3816 60.5624 9.822 59.872 9.822C59.1816 9.822 58.622 10.3816 58.622 11.072H61.122ZM11.394 20.576C11.394 19.8856 10.8344 19.326 10.144 19.326C9.45364 19.326 8.894 19.8856 8.894 20.576H11.394ZM20.992 27.234C21.6824 27.234 22.242 26.6744 22.242 25.984C22.242 25.2936 21.6824 24.734 20.992 24.734V27.234ZM23.008 31.744L24.1918 31.3426C24.0198 30.8353 23.5437 30.494 23.008 30.494V31.744ZM19.424 52.032L18.1931 51.8145C18.1028 52.3256 18.3377 52.8393 18.7833 53.1053L19.424 52.032ZM31.968 59.52L31.3273 60.5933C31.7228 60.8294 32.2161 60.8289 32.6111 60.5919L31.968 59.52ZM27.3695 44.608L26.1857 45.0094L26.1857 45.0094L27.3695 44.608ZM28.704 48.544L27.5202 48.9454C27.6922 49.4527 28.1683 49.794 28.704 49.794V48.544ZM54.978 20.576C54.978 19.8856 54.4184 19.326 53.728 19.326C53.0376 19.326 52.478 19.8856 52.478 20.576H54.978ZM42.88 24.734C42.1896 24.734 41.63 25.2936 41.63 25.984C41.63 26.6744 42.1896 27.234 42.88 27.234V24.734ZM40.864 31.744V30.494C40.3283 30.494 39.8522 30.8353 39.6802 31.3426L40.864 31.744ZM44.448 52.032L45.0911 53.1039C45.5353 52.8374 45.769 52.3246 45.6789 51.8145L44.448 52.032ZM36.5025 44.608L37.6863 45.0094L37.6863 45.0094L36.5025 44.608ZM35.168 48.544V49.794C35.7037 49.794 36.1798 49.4527 36.3518 48.9454L35.168 48.544ZM34.814 12.384C34.814 13.9911 33.5111 15.294 31.904 15.294V17.794C34.8919 17.794 37.314 15.3719 37.314 12.384H34.814ZM31.904 15.294C30.2968 15.294 28.994 13.9911 28.994 12.384H26.494C26.494 15.3719 28.9161 17.794 31.904 17.794V15.294ZM28.994 12.384C28.994 10.7769 30.2968 9.474 31.904 9.474V6.974C28.9161 6.974 26.494 9.39614 26.494 12.384H28.994ZM31.904 9.474C33.5111 9.474 34.814 10.7769 34.814 12.384H37.314C37.314 9.39614 34.8919 6.974 31.904 6.974V9.474ZM30.336 21.15H28V23.65H30.336V21.15ZM24.13 17.28V9.12H21.63V17.28H24.13ZM17.76 2.75H17.248V5.25H17.76V2.75ZM31.586 38.048V27.712H29.086V38.048H31.586ZM31.586 27.712V22.4H29.086V27.712H31.586ZM30.336 26.462H26.336V28.962H30.336V26.462ZM12.256 8.318H11.328V10.818H12.256V8.318ZM18.626 18.752V16.768H16.126V18.752H18.626ZM18.626 16.768V14.688H16.126V16.768H18.626ZM17.376 15.518H9.12V18.018H17.376V15.518ZM5.25 11.648V11.072H2.75V11.648H5.25ZM9.12 15.518C6.98266 15.518 5.25 13.7853 5.25 11.648H2.75C2.75 15.1661 5.60195 18.018 9.12 18.018V15.518ZM26.336 26.462C22.0779 26.462 18.626 23.0101 18.626 18.752H16.126C16.126 24.3908 20.6972 28.962 26.336 28.962V26.462ZM24.13 9.12C24.13 5.60195 21.2781 2.75 17.76 2.75V5.25C19.8973 5.25 21.63 6.98266 21.63 9.12H24.13ZM12.256 10.818C14.3933 10.818 16.126 12.5507 16.126 14.688H18.626C18.626 11.1699 15.7741 8.318 12.256 8.318V10.818ZM28 21.15C25.8627 21.15 24.13 19.4173 24.13 17.28H21.63C21.63 20.7981 24.4819 23.65 28 23.65V21.15ZM33.536 23.65H35.872V21.15H33.536V23.65ZM42.242 17.28V9.12H39.742V17.28H42.242ZM46.112 5.25H46.624V2.75H46.112V5.25ZM34.786 38.048V27.712H32.286V38.048H34.786ZM34.786 27.712V22.4H32.286V27.712H34.786ZM33.536 28.962H37.536V26.462H33.536V28.962ZM51.616 10.818H52.544V8.318H51.616V10.818ZM47.746 18.752V16.768H45.246V18.752H47.746ZM47.746 16.768V14.688H45.246V16.768H47.746ZM46.496 18.018H54.752V15.518H46.496V18.018ZM61.122 11.648V11.072H58.622V11.648H61.122ZM54.752 18.018C58.2701 18.018 61.122 15.1661 61.122 11.648H58.622C58.622 13.7853 56.8893 15.518 54.752 15.518V18.018ZM37.536 28.962C43.1748 28.962 47.746 24.3908 47.746 18.752H45.246C45.246 23.0101 41.7941 26.462 37.536 26.462V28.962ZM42.242 9.12C42.242 6.98266 43.9747 5.25 46.112 5.25V2.75C42.5939 2.75 39.742 5.60195 39.742 9.12H42.242ZM51.616 8.318C48.0979 8.318 45.246 11.1699 45.246 14.688H47.746C47.746 12.5507 49.4787 10.818 51.616 10.818V8.318ZM35.872 23.65C39.3901 23.65 42.242 20.7981 42.242 17.28H39.742C39.742 19.4173 38.0093 21.15 35.872 21.15V23.65ZM11.394 20.864V20.576H8.894V20.864H11.394ZM20.992 24.734H15.568V27.234H20.992V24.734ZM15.568 24.734H15.264V27.234H15.568V24.734ZM14.318 25.984V26.624H16.818V25.984H14.318ZM20.688 32.994H23.008V30.494H20.688V32.994ZM21.7771 31.5265L18.1931 51.8145L20.6549 52.2495L24.2389 31.9615L21.7771 31.5265ZM18.7833 53.1053L31.3273 60.5933L32.6087 58.4467L20.0647 50.9587L18.7833 53.1053ZM21.8242 32.1454L26.1857 45.0094L28.5533 44.2066L24.1918 31.3426L21.8242 32.1454ZM26.1857 45.0094L27.5202 48.9454L29.8878 48.1426L28.5533 44.2066L26.1857 45.0094ZM14.318 26.624C14.318 30.1421 17.1699 32.994 20.688 32.994V30.494C18.5507 30.494 16.818 28.7613 16.818 26.624H14.318ZM8.894 20.864C8.894 24.3821 11.7459 27.234 15.264 27.234V24.734C13.1267 24.734 11.394 23.0013 11.394 20.864H8.894ZM54.978 20.864V20.576H52.478V20.864H54.978ZM42.88 27.234H48.304V24.734H42.88V27.234ZM48.304 27.234H48.608V24.734H48.304V27.234ZM47.054 25.984V26.624H49.554V25.984H47.054ZM43.184 30.494H40.864V32.994H43.184V30.494ZM39.6331 31.9615L43.2171 52.2495L45.6789 51.8145L42.0949 31.5265L39.6331 31.9615ZM43.8049 50.9601L31.3249 58.4481L32.6111 60.5919L45.0911 53.1039L43.8049 50.9601ZM39.6802 31.3426L35.3187 44.2066L37.6863 45.0094L42.0478 32.1454L39.6802 31.3426ZM35.3187 44.2066L33.9842 48.1426L36.3518 48.9454L37.6863 45.0094L35.3187 44.2066ZM47.054 26.624C47.054 28.7613 45.3213 30.494 43.184 30.494V32.994C46.7021 32.994 49.554 30.1421 49.554 26.624H47.054ZM52.478 20.864C52.478 23.0013 50.7453 24.734 48.608 24.734V27.234C52.1261 27.234 54.978 24.3821 54.978 20.864H52.478ZM27.3695 45.858H36.5025V43.358H27.3695V45.858ZM28.704 49.794H35.168V47.294H28.704V49.794Z" fill="black"/>
</svg>

Сконвертированный исходный код в виде свойства background:


.selector{
    background: url('data:image/svg+xml,%3Csvg%20width%3D%2264%22%20height%3D%2264%22%20viewBox%3D%220%200%2064%2064%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M30.336%2022.4H31.586C31.586%2021.7096%2031.0264%2021.15%2030.336%2021.15V22.4ZM17.248%202.75C16.5576%202.75%2015.998%203.30964%2015.998%204C15.998%204.69036%2016.5576%205.25%2017.248%205.25V2.75ZM29.086%2038.048C29.086%2038.7384%2029.6456%2039.298%2030.336%2039.298C31.0264%2039.298%2031.586%2038.7384%2031.586%2038.048H29.086ZM11.328%208.318C10.6376%208.318%2010.078%208.87764%2010.078%209.568C10.078%2010.2584%2010.6376%2010.818%2011.328%2010.818V8.318ZM5.25%2011.072C5.25%2010.3816%204.69036%209.822%204%209.822C3.30964%209.822%202.75%2010.3816%202.75%2011.072H5.25ZM33.536%2022.4V21.15C32.8456%2021.15%2032.286%2021.7096%2032.286%2022.4H33.536ZM46.624%205.25C47.3144%205.25%2047.874%204.69036%2047.874%204C47.874%203.30964%2047.3144%202.75%2046.624%202.75V5.25ZM32.286%2038.048C32.286%2038.7384%2032.8456%2039.298%2033.536%2039.298C34.2264%2039.298%2034.786%2038.7384%2034.786%2038.048H32.286ZM52.544%2010.818C53.2344%2010.818%2053.794%2010.2584%2053.794%209.568C53.794%208.87764%2053.2344%208.318%2052.544%208.318V10.818ZM61.122%2011.072C61.122%2010.3816%2060.5624%209.822%2059.872%209.822C59.1816%209.822%2058.622%2010.3816%2058.622%2011.072H61.122ZM11.394%2020.576C11.394%2019.8856%2010.8344%2019.326%2010.144%2019.326C9.45364%2019.326%208.894%2019.8856%208.894%2020.576H11.394ZM20.992%2027.234C21.6824%2027.234%2022.242%2026.6744%2022.242%2025.984C22.242%2025.2936%2021.6824%2024.734%2020.992%2024.734V27.234ZM23.008%2031.744L24.1918%2031.3426C24.0198%2030.8353%2023.5437%2030.494%2023.008%2030.494V31.744ZM19.424%2052.032L18.1931%2051.8145C18.1028%2052.3256%2018.3377%2052.8393%2018.7833%2053.1053L19.424%2052.032ZM31.968%2059.52L31.3273%2060.5933C31.7228%2060.8294%2032.2161%2060.8289%2032.6111%2060.5919L31.968%2059.52ZM27.3695%2044.608L26.1857%2045.0094L26.1857%2045.0094L27.3695%2044.608ZM28.704%2048.544L27.5202%2048.9454C27.6922%2049.4527%2028.1683%2049.794%2028.704%2049.794V48.544ZM54.978%2020.576C54.978%2019.8856%2054.4184%2019.326%2053.728%2019.326C53.0376%2019.326%2052.478%2019.8856%2052.478%2020.576H54.978ZM42.88%2024.734C42.1896%2024.734%2041.63%2025.2936%2041.63%2025.984C41.63%2026.6744%2042.1896%2027.234%2042.88%2027.234V24.734ZM40.864%2031.744V30.494C40.3283%2030.494%2039.8522%2030.8353%2039.6802%2031.3426L40.864%2031.744ZM44.448%2052.032L45.0911%2053.1039C45.5353%2052.8374%2045.769%2052.3246%2045.6789%2051.8145L44.448%2052.032ZM36.5025%2044.608L37.6863%2045.0094L37.6863%2045.0094L36.5025%2044.608ZM35.168%2048.544V49.794C35.7037%2049.794%2036.1798%2049.4527%2036.3518%2048.9454L35.168%2048.544ZM34.814%2012.384C34.814%2013.9911%2033.5111%2015.294%2031.904%2015.294V17.794C34.8919%2017.794%2037.314%2015.3719%2037.314%2012.384H34.814ZM31.904%2015.294C30.2968%2015.294%2028.994%2013.9911%2028.994%2012.384H26.494C26.494%2015.3719%2028.9161%2017.794%2031.904%2017.794V15.294ZM28.994%2012.384C28.994%2010.7769%2030.2968%209.474%2031.904%209.474V6.974C28.9161%206.974%2026.494%209.39614%2026.494%2012.384H28.994ZM31.904%209.474C33.5111%209.474%2034.814%2010.7769%2034.814%2012.384H37.314C37.314%209.39614%2034.8919%206.974%2031.904%206.974V9.474ZM30.336%2021.15H28V23.65H30.336V21.15ZM24.13%2017.28V9.12H21.63V17.28H24.13ZM17.76%202.75H17.248V5.25H17.76V2.75ZM31.586%2038.048V27.712H29.086V38.048H31.586ZM31.586%2027.712V22.4H29.086V27.712H31.586ZM30.336%2026.462H26.336V28.962H30.336V26.462ZM12.256%208.318H11.328V10.818H12.256V8.318ZM18.626%2018.752V16.768H16.126V18.752H18.626ZM18.626%2016.768V14.688H16.126V16.768H18.626ZM17.376%2015.518H9.12V18.018H17.376V15.518ZM5.25%2011.648V11.072H2.75V11.648H5.25ZM9.12%2015.518C6.98266%2015.518%205.25%2013.7853%205.25%2011.648H2.75C2.75%2015.1661%205.60195%2018.018%209.12%2018.018V15.518ZM26.336%2026.462C22.0779%2026.462%2018.626%2023.0101%2018.626%2018.752H16.126C16.126%2024.3908%2020.6972%2028.962%2026.336%2028.962V26.462ZM24.13%209.12C24.13%205.60195%2021.2781%202.75%2017.76%202.75V5.25C19.8973%205.25%2021.63%206.98266%2021.63%209.12H24.13ZM12.256%2010.818C14.3933%2010.818%2016.126%2012.5507%2016.126%2014.688H18.626C18.626%2011.1699%2015.7741%208.318%2012.256%208.318V10.818ZM28%2021.15C25.8627%2021.15%2024.13%2019.4173%2024.13%2017.28H21.63C21.63%2020.7981%2024.4819%2023.65%2028%2023.65V21.15ZM33.536%2023.65H35.872V21.15H33.536V23.65ZM42.242%2017.28V9.12H39.742V17.28H42.242ZM46.112%205.25H46.624V2.75H46.112V5.25ZM34.786%2038.048V27.712H32.286V38.048H34.786ZM34.786%2027.712V22.4H32.286V27.712H34.786ZM33.536%2028.962H37.536V26.462H33.536V28.962ZM51.616%2010.818H52.544V8.318H51.616V10.818ZM47.746%2018.752V16.768H45.246V18.752H47.746ZM47.746%2016.768V14.688H45.246V16.768H47.746ZM46.496%2018.018H54.752V15.518H46.496V18.018ZM61.122%2011.648V11.072H58.622V11.648H61.122ZM54.752%2018.018C58.2701%2018.018%2061.122%2015.1661%2061.122%2011.648H58.622C58.622%2013.7853%2056.8893%2015.518%2054.752%2015.518V18.018ZM37.536%2028.962C43.1748%2028.962%2047.746%2024.3908%2047.746%2018.752H45.246C45.246%2023.0101%2041.7941%2026.462%2037.536%2026.462V28.962ZM42.242%209.12C42.242%206.98266%2043.9747%205.25%2046.112%205.25V2.75C42.5939%202.75%2039.742%205.60195%2039.742%209.12H42.242ZM51.616%208.318C48.0979%208.318%2045.246%2011.1699%2045.246%2014.688H47.746C47.746%2012.5507%2049.4787%2010.818%2051.616%2010.818V8.318ZM35.872%2023.65C39.3901%2023.65%2042.242%2020.7981%2042.242%2017.28H39.742C39.742%2019.4173%2038.0093%2021.15%2035.872%2021.15V23.65ZM11.394%2020.864V20.576H8.894V20.864H11.394ZM20.992%2024.734H15.568V27.234H20.992V24.734ZM15.568%2024.734H15.264V27.234H15.568V24.734ZM14.318%2025.984V26.624H16.818V25.984H14.318ZM20.688%2032.994H23.008V30.494H20.688V32.994ZM21.7771%2031.5265L18.1931%2051.8145L20.6549%2052.2495L24.2389%2031.9615L21.7771%2031.5265ZM18.7833%2053.1053L31.3273%2060.5933L32.6087%2058.4467L20.0647%2050.9587L18.7833%2053.1053ZM21.8242%2032.1454L26.1857%2045.0094L28.5533%2044.2066L24.1918%2031.3426L21.8242%2032.1454ZM26.1857%2045.0094L27.5202%2048.9454L29.8878%2048.1426L28.5533%2044.2066L26.1857%2045.0094ZM14.318%2026.624C14.318%2030.1421%2017.1699%2032.994%2020.688%2032.994V30.494C18.5507%2030.494%2016.818%2028.7613%2016.818%2026.624H14.318ZM8.894%2020.864C8.894%2024.3821%2011.7459%2027.234%2015.264%2027.234V24.734C13.1267%2024.734%2011.394%2023.0013%2011.394%2020.864H8.894ZM54.978%2020.864V20.576H52.478V20.864H54.978ZM42.88%2027.234H48.304V24.734H42.88V27.234ZM48.304%2027.234H48.608V24.734H48.304V27.234ZM47.054%2025.984V26.624H49.554V25.984H47.054ZM43.184%2030.494H40.864V32.994H43.184V30.494ZM39.6331%2031.9615L43.2171%2052.2495L45.6789%2051.8145L42.0949%2031.5265L39.6331%2031.9615ZM43.8049%2050.9601L31.3249%2058.4481L32.6111%2060.5919L45.0911%2053.1039L43.8049%2050.9601ZM39.6802%2031.3426L35.3187%2044.2066L37.6863%2045.0094L42.0478%2032.1454L39.6802%2031.3426ZM35.3187%2044.2066L33.9842%2048.1426L36.3518%2048.9454L37.6863%2045.0094L35.3187%2044.2066ZM47.054%2026.624C47.054%2028.7613%2045.3213%2030.494%2043.184%2030.494V32.994C46.7021%2032.994%2049.554%2030.1421%2049.554%2026.624H47.054ZM52.478%2020.864C52.478%2023.0013%2050.7453%2024.734%2048.608%2024.734V27.234C52.1261%2027.234%2054.978%2024.3821%2054.978%2020.864H52.478ZM27.3695%2045.858H36.5025V43.358H27.3695V45.858ZM28.704%2049.794H35.168V47.294H28.704V49.794Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E');
}
    

Результат

Конвертер SVG: