Как подключить SVG с помощью object?

Question

[Никита Чернов]

В структуре HTML имеется следующий элемент:

<object type="image/svg+xml" data="github.svg" width="60" height="60" >empty</object>

В этой же директории лежит файл github.svg со следующим содержимым:

github.svg

<svg fill="white" enable-background="new 0 0 60 60" version="1.1" viewBox="0 0 60 60" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><path d="m409.13 114.57c-19.608-33.596-46.205-60.194-79.798-79.8-33.598-19.607-70.277-29.408-110.06-29.408-39.781 0-76.472 9.804-110.06 29.408-33.596 19.605-60.192 46.204-79.8 79.8-19.605 33.595-29.408 70.281-29.408 110.06 0 47.78 13.94 90.745 41.827 128.91 27.884 38.164 63.906 64.572 108.06 79.227 5.14 0.954 8.945 0.283 11.419-1.996 2.475-2.282 3.711-5.14 3.711-8.562 0-0.571-0.049-5.708-0.144-15.417-0.098-9.709-0.144-18.179-0.144-25.406l-6.567 1.136c-4.187 0.767-9.469 1.092-15.846 1-6.374-0.089-12.991-0.757-19.842-1.999-6.854-1.231-13.229-4.086-19.13-8.559-5.898-4.473-10.085-10.328-12.56-17.556l-2.855-6.57c-1.903-4.374-4.899-9.233-8.992-14.559-4.093-5.331-8.232-8.945-12.419-10.848l-1.999-1.431c-1.332-0.951-2.568-2.098-3.711-3.429-1.142-1.331-1.997-2.663-2.568-3.997-0.572-1.335-0.098-2.43 1.427-3.289s4.281-1.276 8.28-1.276l5.708 0.853c3.807 0.763 8.516 3.042 14.133 6.851 5.614 3.806 10.229 8.754 13.846 14.842 4.38 7.806 9.657 13.754 15.846 17.847 6.184 4.093 12.419 6.136 18.699 6.136s11.704-0.476 16.274-1.423c4.565-0.952 8.848-2.383 12.847-4.285 1.713-12.758 6.377-22.559 13.988-29.41-10.848-1.14-20.601-2.857-29.264-5.14-8.658-2.286-17.605-5.996-26.835-11.14-9.235-5.137-16.896-11.516-22.985-19.126-6.09-7.614-11.088-17.61-14.987-29.979-3.901-12.374-5.852-26.648-5.852-42.826 0-23.035 7.52-42.637 22.557-58.817-7.044-17.318-6.379-36.732 1.997-58.24 5.52-1.715 13.706-0.428 24.554 3.853 10.85 4.283 18.794 7.952 23.84 10.994 5.046 3.041 9.089 5.618 12.135 7.708 17.705-4.947 35.976-7.421 54.818-7.421s37.117 2.474 54.823 7.421l10.849-6.849c7.419-4.57 16.18-8.758 26.262-12.565 10.088-3.805 17.802-4.853 23.134-3.138 8.562 21.509 9.325 40.922 2.279 58.24 15.036 16.18 22.559 35.787 22.559 58.817 0 16.178-1.958 30.497-5.853 42.966-3.9 12.471-8.941 22.457-15.125 29.979-6.191 7.521-13.901 13.85-23.131 18.986-9.232 5.14-18.182 8.85-26.84 11.136-8.662 2.286-18.415 4.004-29.263 5.146 9.894 8.562 14.842 22.077 14.842 40.539v60.237c0 3.422 1.19 6.279 3.572 8.562 2.379 2.279 6.136 2.95 11.276 1.995 44.163-14.653 80.185-41.062 108.07-79.226 27.88-38.161 41.825-81.126 41.825-128.91-0.01-39.771-9.818-76.454-29.414-110.05z" /></svg>

На месте объекта не появляется текст записанный внутри него, следственно, ему получается достучаться до файла с SVG.
В чем может быть причина того, что он не отображается? (заливку пробовал разную и из разных мест).

Answer 1

[Максим]

косячно нарисовано и не видно потому что иконка находится в самом низу с права и она здоровенная и потому скопируйте эту иконку из спойлера и подключите как object а fill замените сами на нужный

icon

<svg version="1.1" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg">
 <path d="m54.002489 16.514931c-2.587961-4.5852-6.098365-8.2153072-10.532137-10.891144-4.434431-2.6759732-9.275509-4.0136182-14.526268-4.0136182-5.250494 0-10.093155 1.3380549-14.526267 4.0136182-4.434168 2.6757-7.944441 6.3059438-10.532402 10.891144-2.5875658 4.585061-3.8814146 9.591984-3.8814146 15.021041 0 6.521039 1.8398707 12.384921 5.5205361 17.593699 3.6802689 5.208642 8.4346329 8.812818 14.262299 10.81294 0.678401 0.130203 1.180604 0.03863 1.507135-0.272414 0.326663-0.311449 0.489797-0.70151 0.489797-1.168547 0-0.07793-0.0065-0.77903-0.01901-2.104119-0.01293-1.32509-0.01901-2.481079-0.01901-3.467423l-0.866745 0.155041c-0.552618 0.104682-1.249762 0.149037-2.091431 0.136481-0.841272-0.01214-1.714617-0.103315-2.618846-0.272825-0.904625-0.168007-1.746029-0.557659-2.524872-1.168136-0.778443-0.610477-1.331064-1.40957-1.657728-2.396051l-0.376817-0.896678c-0.251168-0.596966-0.646594-1.260123-1.186809-1.987018-0.540214-0.727579-1.0865-1.220818-1.639121-1.480541l-0.263839-0.195304c-0.175803-0.129793-0.338937-0.286336-0.489796-0.467992-0.150727-0.181655-0.2635742-0.363447-0.3389374-0.545511-0.0754947-0.182202-0.0129365-0.331649 0.1883424-0.448885 0.201277-0.117238 0.565028-0.174149 1.092836-0.174149l0.75337 0.116418c0.502467 0.104132 1.123984 0.415174 1.865344 0.935028 0.740963 0.519444 1.350074 1.194749 1.827465 2.025643 0.578093 1.065366 1.274579 1.877153 2.091434 2.435767 0.816195 0.558614 1.639121 0.837445 2.467987 0.837445 0.828865 0 1.544752-0.06497 2.147924-0.194212 0.602511-0.12993 1.167802-0.325234 1.695611-0.58482 0.22609-1.741217 0.841668-3.078863 1.846206-4.013891-1.431773-0.155588-2.719023-0.389925-3.862409-0.701509-1.142727-0.311994-2.323595-0.818337-3.541817-1.520393-1.218881-0.7011-2.230019-1.571709-3.033676-2.610326-0.803788-1.039162-1.463449-2.403421-1.978059-4.091548-0.514873-1.688809-0.772375-3.636932-0.772375-5.844913 0-3.143828 0.992527-5.819119 2.977185-8.027373-0.929702-2.363569-0.841932-5.013201 0.263574-7.948624 0.728557-0.234064 1.808987-0.05841 3.24076 0.52586 1.432036 0.584546 2.480525 1.085293 3.146522 1.500467 0.665996 0.415037 1.199612 0.766747 1.601637 1.051991 2.336794-0.675169 4.748292-1.012822 7.235153-1.012822s4.898887 0.337653 7.235813 1.012822l1.431905-0.934755c0.979196-0.623715 2.135518-1.195296 3.46619-1.714878 1.331465-0.519307 2.349596-0.662339 3.05334-0.428275 1.130056 2.935559 1.230761 5.585055 0.300794 7.948624 1.984527 2.208254 2.97745 4.884227 2.97745 8.027373 0 2.207981-0.258427 4.162245-0.772509 5.864021-0.514741 1.702047-1.180078 3.064941-1.996272 4.091547-0.817119 1.026469-1.834725 1.890255-3.052945 2.591219-1.218486 0.701509-2.399751 1.207852-3.542477 1.519846-1.143254 0.311995-2.430503 0.546468-3.862277 0.702328 1.305859 1.168547 1.958921 3.01308 1.958921 5.532784v8.221174c0 0.467037 0.157063 0.856961 0.471451 1.168547 0.313992 0.311039 0.80986 0.402617 1.488262 0.272279 5.828854-1.99985 10.583217-5.604163 14.263618-10.812804 3.679742-5.208232 5.520272-11.072116 5.520272-17.593699-0.0012-5.427966-1.295828-10.434479-3.882206-15.019678z" fill="#f00" stroke-width=".13421392"/>
</svg>

Comments

[Никита Чернов]

Обнаружил что object не работает только на localhost от webpack'a. Если просто html в браузере открыть - все хорошо.

[Максим]

DRIMchansky, в общем я перерисовал SVG в меньший размер - дальше ваше дело