Изображение SVG с рамкой/штрихом

Я пытаюсь добавить границу вокруг изображения svg. Я пробовал 2 подхода, но оба не удалось...

Попытка 1: Рисует изображение, но без рамки.

<image id="note-0" xlink:href="#" onclick="location.href='http://example.com/example.png'; return false;" x="185" y="79" height="202" width="150" style="stroke:#ac0d0d; stroke-width:3;"></image>

Попытка 2: Рисует изображение, но без рамки.

<defs>
    <image id="image1352022098990svg" height="202" width="150" xlink:href="#" onclick="location.href='http://example.com/example.png'; return false;"></image>
</defs>

<use xmlns="http://www.w3.org/2000/svg" id="note-0" xlink:href="#image1352022098990svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="185" y="79" height="202" width="150" style="stroke:#ac0d0d; stroke-width:3;"/>

Итак, мой вопрос: возможно ли определить изображение на элементе svg и одновременно иметь границу/штрих?

Пожалуй, я могу позиционировать элементы svg с переводом и с атрибутом x/y. Что предпочтительнее и почему?

Ответ 1