Why did the contents of my SVG image disappear? And how can I center it and get it to fit the contents of the box?

Question

Hello everyone,

I am a newb struggling with SVG. Inside the codepen, I have a cute svg image that seems to have disappeared. For the life of me, I don't understand how or why they just disappeared. I just wanted the svg image to display in the center of the page but the contents have disappeared. What am I doing wrong?

I'm just going to include the parts where I declare the viewBox and the CSS to keep it short.

<html>

<svg viewBox="0 0 100 100" width="300" height="300" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 <!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
 <defs>

  <symbol viewBox="0 0 100 100" height="500" width="500" y="50" x="50" id="svg_2" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">
   <path id="why" d="m351.08,636.241c-0.977,-0.314 -1.948,-0.646 -2.931,-0.941c-2.603,-0.782 -4.111,-2.604 -4.965,-5.098c-1.183,-3.452 -1.111,-6.846 0.056,-10.319c2.49,-7.41 6.638,-13.855 11.249,-20.071c4.029,-5.433 8.56,-10.356 14.081,-14.293c1.684,-1.2 3.56,-2.126 5.306,-3.241c0.408,-0.262 0.858,-0.749 0.936,-1.194c1.071,-6.17 2.085,-12.35 3.101,-18.529c0.054,-0.33 0.007,-0.677 0.007,-1.335c-1.389,1.895 -2.548,3.602 -3.84,5.201c-1.123,1.393 -2.32,2.746 -3.622,3.971c-1.898,1.786 -4.227,2.077 -6.716,1.58c-2.703,-0.541 -5.174,-1.637 -7.418,-3.198c-0.933,-0.649 -1.69,-1.551 -2.481,-2.295c-1.225,1.773 -2.445,3.724 -3.852,5.528c-1.594,2.048 -3.559,3.659 -6.178,4.298c-3.835,0.937 -8.463,-2.148 -9.296,-6.01c-0.922,-4.269 -0.559,-8.513 -0.083,-12.76c0.447,-3.993 1.048,-7.97 1.581,-11.954c-0.111,-0.138 -0.222,-0.275 -0.333,-0.414c-0.244,0.444 -0.436,0.931 -0.741,1.327c-7.101,9.197 -13.074,19 -16.362,30.26c-0.392,1.338 -1.151,1.779 -2.545,1.524c-0.739,-0.136 -1.484,-0.343 -2.17,-0.646c-2.521,-1.116 -2.935,-1.749 -2.601,-4.457c0.719,-5.823 1.518,-11.636 2.28,-17.453c0.314,-2.403 0.621,-4.808 0.948,-7.345c-2.354,0.113 -4.58,0.215 -6.806,0.329c-0.838,0.043 -1.676,0.175 -2.511,0.155c-0.976,-0.023 -1.445,0.396 -1.655,1.331c-0.85,3.77 -1.715,7.537 -2.624,11.293c-1.187,4.903 -3.706,8.994 -7.744,12.046c-3.259,2.463 -6.84,3.155 -10.693,1.433c-2.12,-0.948 -3.613,-2.555 -4.303,-4.741c-0.847,-2.685 -1.493,-5.432 -2.231,-8.171c-0.185,0.306 -0.432,0.735 -0.697,1.153c-2.968,4.685 -5.833,9.439 -8.954,14.02c-1.506,2.211 -3.495,3.983 -6.44,4.377c-5.024,0.672 -10.14,-2.989 -10.99,-8c-0.555,-3.271 -0.047,-6.473 0.74,-9.607c1.145,-4.556 2.533,-9.05 3.76,-13.586c0.501,-1.854 1.604,-2.856 3.521,-3.021c1.111,-0.096 2.211,-0.313 3.322,-0.416c1.116,-0.104 1.732,0.516 1.583,1.574c-0.26,1.849 -0.679,3.676 -1.037,5.511c-1.129,5.79 -2.273,11.577 -3.376,17.373c-0.163,0.857 -0.18,1.751 -0.179,2.627c0,0.313 0.191,0.819 0.411,0.893c0.309,0.104 0.856,0.011 1.071,-0.217c0.625,-0.661 1.141,-1.427 1.69,-2.159c5.949,-7.924 10.624,-16.599 14.956,-25.47c0.587,-1.201 0.96,-2.536 1.233,-3.852c0.219,-1.056 0.739,-1.517 1.719,-1.316c2.015,0.41 4.024,0.868 6.009,1.403c0.833,0.225 1.125,0.961 1.031,1.814c-0.593,5.355 -1.259,10.704 -1.746,16.068c-0.187,2.052 -0.028,4.146 0.098,6.212c0.058,0.953 0.408,1.95 1.457,2.294c1.131,0.372 2.098,-0.056 2.93,-0.881c2.497,-2.476 3.818,-5.591 4.705,-8.891c1.354,-5.041 2.611,-10.107 3.839,-15.18c0.388,-1.601 1.223,-2.552 2.879,-2.717c1.23,-0.123 2.461,-0.323 3.693,-0.338c3.8,-0.047 7.6,-0.037 11.399,-0.009c0.787,0.006 1.152,-0.105 1.317,-1.041c1.617,-9.189 3.213,-18.385 5.018,-27.539c1.252,-6.354 3.467,-12.412 6.089,-18.349c1.427,-3.23 3.551,-4.644 6.984,-4.182c1.183,0.159 2.392,0.26 3.527,0.597c2.211,0.656 3.409,2.155 3.217,4.454c-0.278,3.331 -0.679,6.672 -1.333,9.947c-2.655,13.292 -6.721,26.159 -11.922,38.672c-0.118,0.283 -0.223,0.571 -0.18,0.938c1.241,-1.446 2.487,-2.889 3.723,-4.34c3.08,-3.617 7.474,-4.275 11.492,-1.731c1.799,1.139 2.473,2.851 2.176,4.834c-0.624,4.18 -1.478,8.324 -2.097,12.503c-0.544,3.667 -0.925,7.359 -1.308,11.047c-0.076,0.733 0.081,1.523 0.281,2.245c0.376,1.355 1.328,1.574 2.268,0.534c0.532,-0.59 1.054,-1.228 1.414,-1.928c2.68,-5.216 5.547,-10.353 7.883,-15.719c1.434,-3.293 2.03,-6.949 3.008,-10.44c0.15,-0.537 0.313,-1.072 0.501,-1.597c0.451,-1.256 0.641,-2.695 2.223,-3.168c2.152,-0.642 4.268,-0.647 6.254,0.495c0.337,0.194 0.631,0.802 0.616,1.206c-0.057,1.535 -0.08,3.104 -0.425,4.588c-0.758,3.257 -1.906,6.432 -2.517,9.711c-0.617,3.319 -0.825,6.72 -1.11,10.093c-0.084,1.002 -0.102,2.374 1.065,2.653c0.627,0.15 1.651,-0.613 2.244,-1.214c1.259,-1.274 2.457,-2.638 3.496,-4.095c4.668,-6.551 8.467,-13.526 10.098,-21.506c0.215,-1.051 0.371,-2.129 0.406,-3.199c0.038,-1.156 0.664,-1.428 1.635,-1.374c0.158,0.009 0.314,0.059 0.473,0.083c4.083,0.631 4.188,0.85 4.574,4.958c0.71,7.571 0.132,15.091 -0.669,22.61c-0.571,5.36 -1.153,10.72 -1.721,16.081c-0.041,0.39 -0.005,0.788 -0.005,1.331c2.141,-0.517 4.21,-1.015 6.279,-1.515c1.656,-0.399 2.405,0.121 2.57,1.812c0.043,0.436 0.037,0.879 0.027,1.318c-0.047,1.976 -0.364,2.417 -2.216,3.023c-2.007,0.658 -4.002,1.364 -6.038,1.918c-1.221,0.332 -1.789,0.884 -2.007,2.219c-1.224,7.502 -4.099,14.462 -7.15,21.371c-2.45,5.548 -5.431,10.753 -9.187,15.518c-0.766,0.971 -1.462,2.004 -2.103,3.061c-2.238,3.694 -5.323,6.317 -9.464,7.646c-0.956,0.001 -1.916,0.001 -2.877,0.001zm23.134,-45.607c-0.137,-0.093 -0.273,-0.187 -0.411,-0.279c-1.13,0.804 -2.282,1.58 -3.388,2.417c-4.979,3.774 -8.565,8.731 -12.06,13.835c-3.738,5.462 -6.414,11.288 -7.426,17.827c-0.295,1.91 -0.397,3.873 -0.341,5.804c0.033,1.121 0.823,1.351 1.773,0.688c0.486,-0.34 0.959,-0.743 1.319,-1.21c1.367,-1.766 2.743,-3.529 4.013,-5.365c5.267,-7.621 8.967,-16.075 12.834,-24.431c1.399,-3.018 2.468,-6.187 3.687,-9.286zm-39.855,-94.892c-2.8,2.329 -11.577,36.271 -11.531,43.604c0.065,-0.035 0.164,-0.055 0.19,-0.109c0.177,-0.356 0.375,-0.708 0.497,-1.083c3.187,-9.768 6.492,-19.498 9.472,-29.328c1.019,-3.359 1.256,-6.963 1.749,-10.468c0.108,-0.765 -0.215,-1.59 -0.377,-2.616z" fill="#1E6C81" clip-rule="evenodd" fill-rule="evenodd"/>

and the CSS...

html {
  display: flex;
  justify-content: center;
  align-items: center;
  background:linear-gradient(pink, mediumpurple);
  width: 100vw;
  height: 100vh;
}


svg{
    height: 75vh;
    width: 25vw;
    border: 5px solid black; 

}

Answer 1

Robert have raison. The start path point (m351.08,636.241) signify that your view box is too smaller.
Symbol view box height and width outside container and blalalalalala

Edit your code like this:

<symbol viewBox="0 0 1000 1000" id="svg_2" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">
   <path...

Remove transform property

<use xlink:href="#svg_2" id="svg_3"/>

Finally I hope you find an answer for your pen question. Good luck.

Answer 2

As others have stated, the main problem is that your viewBox values are incorrect. The content is roughly 500x500, but your original viewBox had a width and height of 100. So it was too small. In your updated codepen, your viewBoxes are way too big. 5000x5000 is roughly 10x too big.

If we use 500x500 viewBoxes for the <svg> and <symbol> , you get a much better sized result. Note that your content is a little offset from the origin, so I had to give the symbol viewBox non-zero x and y values also.

<svg viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 <!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
 <defs>

  <symbol viewBox="55 145 500 500" height="500" width="500" id="svg_2" ...

Updated codepen

Why did the contents of my SVG image disappear? And how can I center it and get it to fit the contents of the box?

Question

2 answers

solution1
0 2018-02-20 03:12:13

solution2
0 2018-02-20 07:25:44

Why did the contents of my SVG image disappear? And how can I center it and get it to fit the contents of the box?

Question

2 answers

solution1 0 2018-02-20 03:12:13

solution2 0 2018-02-20 07:25:44

solution1
0 2018-02-20 03:12:13

solution2
0 2018-02-20 07:25:44