У меня есть файл изображения (jpg и т.д.) и некоторые рисунки svg (тэг svg скопирован с сайта, как Java String). Рисунок svg имеет такое же разрешение, что и файл изображения. Я хочу поместить svg рисунки поверх изображения и сохранить его как один файл. Мой подход, которым я не горжусь, но работает, заключается в следующем:
Я хочу, чтобы вы могли нарисовать SVG-рисунки поверх моего изображения за один шаг.
Использование шаблона SVG решит вашу проблему.
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="200" height="200">
<defs>
<pattern id="image" x="0" y="0" patternUnits="userSpaceOnUse" height="200" width="200">
<image x="0" y="0" width="200" height="200"
xlink:href="http://cdn.sstatic.net/stackexchange/img/logos/so/so-logo.png"/>
</pattern>
</defs>
<rect width="200" height="200" fill="url(#image)"/>
<circle cx="100" cy="100" r="50"/>
</svg>
Скрипт доступен здесь.
Я вытащил SVG выше через ратификатор батика, и он был правильно растрирован.
Обновление
Как отмечено в комментариях, вы можете просто включить изображение непосредственно в свой SVG без использования шаблона.
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="200" height="200">
<image x="0" y="0" width="200" height="200"
xlink:href="http://cdn.sstatic.net/stackexchange/img/logos/so/so-logo.png"/>
<circle cx="100" cy="100" r="50"/>
</svg>
Скрипт доступен здесь.
<image>
?