Не отображается svg в браузере

#svg #svg_animation #inkscape

Сделал картинку в Inkscape. Для того, чтобы сделать анимацию рукописного ввода. Пытаюсь
вставить на сайт, но она не отображается.
Пытался просто код вставлять   , и через img,
ни так, ни так не выходит. Ошибок в консоли нет.

Вот код картинки.




В редакторе картинка выглядит так:

 
    

Ответы

Ответ 1

Примеры анимации букв


Анимация вертикального появления букв.


Реализует анимацию вертикальное движение маски 


      
       
       
     










Анимация горизонтального появления букв   



      
       
       
       
     










Летающие буквы с горизонтальной парковкой  


Анимация достигается изменением позиции X, Y для каждой буквы по отдельности 















Летающие буквы с вертикальной парковкой   








Ответ 2

Разбираться вручную в коде, который получен из векторного редактора, очень нелегко. 
Проще и быстрее попробовать сделать самостоятельно нужный текст и это довольно просто. 

В векторном редакторе можно создать любой текст, с выбором любого шрифта. 
При этом каждая буква будет иметь свой path, что даёт богатые возможности для оформления,
-  каждой букве можно назначать свой цвет, назначать любую трансформацию: смещения,
масштабирования, поворота.
Также появляется возможность анимировать каждую букву или слово целиком.

Техника создания path для каждой буквы 


Загружаете в векторный редактор пустой SVG файл с нужным размером
холста SVG.