Как сделать треугольную svg картинку?
никакого svg не надо
https://codepen.io/web-tiki/pen/icClo
чтобы при наведении курсором из панели разработчика был треугольник, а не треугольник в квадрате
Думаю, что ты неправильно представляешь себе своё желание.
Вполне будет достаточно, если при наведении мышки на треугольник будет срабатывать событие onmouseover и при выходе из него onmouseout.  Событие прикрепляется к path. Всё остальное для пользователя останется невидимым.<svg><path id="p1" d="M10,100L100,10L190,100Z" fill="#00f"/></svg>
<script type="text/javascript">
var p1 = document.getElementById('p1');
p1.onmouseover = function(e)
{
	this.setAttribute('fill', '#0f0')
}
p1.onmouseout = function(e)
{
	this.setAttribute('fill', '#00f')
}
</script>Дополнительно:Как добавить background-image к SVG path