How Do I Make My Svg Mobile Responsive

I wanted to make a svg animation for a website. But the svg is not mobile responsive. It stretches out of the background and thus making the width of the website go beyond what I i

Solution 1:

You can do it like this:

* {margin: 0; padding: 0; box-sizing: border-box}

svg {width: 500px; height: 150px; max-width: 100%; background: Khaki}

.cls-1 {fill: none; stroke: #8B0000; stroke-width: 2; stroke-miterlimit: 5}

.PhIOtjDr_0 {
  stroke-dasharray: 29482950;
  stroke-dashoffset: 2949;
  animation: PhIOtjDr_draw 6666ms ease-in forwards;
}

@keyframes PhIOtjDr_draw { 
  100% {stroke-dashoffset: 0}
}

@keyframes PhIOtjDr_fade {
  0% {stroke-opacity: 1}
  97.1830985915493% {stroke-opacity: 1}
  100% {stroke-opacity: 0}
}

#logo:hover.PhIOtjDr_0 {
  fill: #8B0000;
}

<svgid="logo"data-name="Layer 1"xmlns="http://www.w3.org/2000/svg"x="0"y="0"viewBox="0 0 600 140.63"><defs></defs><pathclass="cls-1 PhIOtjDr_0"d="M83.9,93.58H81.26V141a13.39,13.39,0,0,1-2.54,8.45A17.45,17.45,0,0,1,73,154.34a22.66,22.66,0,0,1-6.54,2.34,27.14,27.14,0,0,1-6.2.44,22.94,22.94,0,0,1-5.67-1,41.64,41.64,0,0,1-5-1.9,39.58,39.58,0,0,1-10.16-7l2.73-6.35a11.3,11.3,0,0,0,1.37,1.56q.78.78,2.2,2.1t3.66,3.17a36.14,36.14,0,0,0,5.81,4.15A15.89,15.89,0,0,0,60,153.65a10.6,10.6,0,0,0,4.3-.1,20.7,20.7,0,0,0,4.4-1.66,6.62,6.62,0,0,0,2.88-3.08,9,9,0,0,0,.93-3.76V125.33a36.24,36.24,0,0,1-3,3.22,27.72,27.72,0,0,1-3.81,2.93,38.67,38.67,0,0,1-4.88,2.69,35.31,35.31,0,0,1-5.47,2,20.56,20.56,0,0,1-5.47.78A14.33,14.33,0,0,1,43,135.29a14.88,14.88,0,0,1-5-4,14.47,14.47,0,0,1-2.83-5.76,17.74,17.74,0,0,1-.29-7.18A34.27,34.27,0,0,1,36.92,111a53,53,0,0,1,3.57-7.23q2.1-3.56,4.25-6.89,1.27-2,2.05-3.32H34.57L39.46,85H57.82q-1.76,2.93-3.08,5.27t-2.93,5.27q-1.61,2.93-3.08,5.86a50.48,50.48,0,0,0-4.54,13,24.23,24.23,0,0,0-.24,9.23,5.92,5.92,0,0,0,3,3.81,12,12,0,0,0,7,.78q4.3-.59,10.26-4.59a36.93,36.93,0,0,0,4.59-3.52q2.05-1.85,3.61-3.52V93.58H65.24L70.13,85H88.88Zm44-8.6a6.37,6.37,0,0,1,4.54,1.37q1.42,1.37,1.42,4.49v45.61l-6.25-6.06a28.9,28.9,0,0,1-6.89,4,30.91,30.91,0,0,1-9.57,2.44,25.44,25.44,0,0,1-10.11-1.07,16.39,16.39,0,0,1-8.5-6.54,9.46,9.46,0,0,1-1.17-2.44,18.54,18.54,0,0,1-.93-6.35,12.31,12.31,0,0,1,.44-3,12.48,12.48,0,0,1,1.56-3.52,12.82,12.82,0,0,1,2.2-2.54,13.06,13.06,0,0,1,2.64-1.81q1.41-.73,3-1.42a47.46,47.46,0,0,1,5.52-2.2q2.59-.83,5.62-1.9,1.56-.59,4-1.42a22.21,22.21,0,0,0,4.44-2.1,11.16,11.16,0,0,0,3.27-3,4.31,4.31,0,0,0,.54-4H94.73L99.62,85Zm-2.83,20.71-2.44.93q-2,.73-4.3,1.51t-4.49,1.56q-2.15.78-3,1.07a25.6,25.6,0,0,0-3.42,1.51,20.33,20.33,0,0,0-3.27,2.15,18.09,18.09,0,0,0-2.73,2.73,7.88,7.88,0,0,0-1.61,3.37,15.32,15.32,0,0,0-.49,6,7.1,7.1,0,0,0,1.51,3.61,5.84,5.84,0,0,0,2.73,1.76,10.31,10.31,0,0,0,3.32.44,16.7,16.7,0,0,0,3.22-.39q1.51-.34,2.39-.63a26.18,26.18,0,0,0,3.13-1.51,23.3,23.3,0,0,0,3.71-2.59,23.69,23.69,0,0,0,3.42-3.57,14.48,14.48,0,0,0,2.34-4.35Zm53.72-18.07a47.61,47.61,0,0,1,4.79,5.71,43.51,43.51,0,0,1,4.35,7.57,36.79,36.79,0,0,1,2.73,9.18,33.44,33.44,0,0,1,0,10.65,38.5,38.5,0,0,1-2.2,8.06,31.4,31.4,0,0,1-3.17,6,25,25,0,0,1-3.76,4.35,23.52,23.52,0,0,1-4.05,3,25.4,25.4,0,0,1-10.26,3.32,30.93,30.93,0,0,0,4.3-2.64,31.77,31.77,0,0,0,3.81-3.37,22.36,22.36,0,0,0,3.52-4.84,43.58,43.58,0,0,0,2.49-5.47,29.41,29.41,0,0,0,1.86-9.77q0-2.44,0-5.18a17.68,17.68,0,0,0-1.66-6.54,27.73,27.73,0,0,0-3.37-5.52,24.91,24.91,0,0,0-3.86-4,10.54,10.54,0,0,0-2.93-1.86l-14.94,9v31.16l-8.79-8.5V93.68h-7.33L145.13,85h11.23V99.83l11.82-9L176,85a11.25,11.25,0,0,1,1.37,1.17Zm25.69-3.74q-.21.56-.42,1.11h.42ZM212.22,73a7.9,7.9,0,0,1,2.8-.49c2.19,0,9.32,2,12.26,2a13.31,13.31,0,0,0,4.75-.76c-1.14,0-3.15-1.56-3.15-6.09s4.84-6.18,4.84-6.18c-1.85,0-10-11.22-10-17.61a12.87,12.87,0,0,1,4.43-9.78c-3.09,0-10.09,2.78-10.09,11.33S223,60.31,223,62.26s-1.13,3.19-3.6,3.19-9.24-3.19-9.24-8.79,3.17-5.11,3.17-11.91S208,27.36,208,27.36s-5.35,10.61-5.35,17.4,3.17,6.31,3.17,11.91c0,4-3.43,6.74-6.3,8a8.11,8.11,0,0,1-2.95.79l-.27,0C194,65.35,193,64.14,193,62.26s4.94-8.34,4.94-16.89-7-11.33-10.09-11.33a12.87,12.87,0,0,1,4.43,9.78c0,6.38-8.13,17.61-10,17.61,0,0,4.84,1.65,4.84,6.18s-2,6.09-3.15,6.09a13.31,13.31,0,0,0,4.75.76c2.5,0,8-1.43,10.94-1.87a9.84,9.84,0,0,1,1.32-.13c2.19,0,4.85.86,4.85,2.95,0,1.1-1.1,5-2.37,8.46V85h-3.22l-4.88,8.6h8.11V118.1a11.2,11.2,0,0,0,.59,3.66,13.42,13.42,0,0,0,2,3.57l2.25,2.78a33.89,33.89,0,0,0,2.34,2.59,41.72,41.72,0,0,0,3.57,3.17,14,14,0,0,0,4.15,2.3,8.81,8.81,0,0,0,4.93.15,9.74,9.74,0,0,0,4.15-2.25,11.71,11.71,0,0,0,2.78-3.91,10.7,10.7,0,0,0,.93-4.83l-8.3-8.3a10.08,10.08,0,0,1-.83,4.88,11.48,11.48,0,0,1-2.88,4,13.59,13.59,0,0,1-2.34,1.71,4.54,4.54,0,0,1-2.64.63,1.75,1.75,0,0,1-1.86-1.66v-33h6l4.88-8.6H213c-.25-.64-.5-1.31-.73-2a38.12,38.12,0,0,1-2.05-7.58A2.74,2.74,0,0,1,212.22,73Zm56.25,12.41a8.92,8.92,0,0,1,4.35,1.56,11.66,11.66,0,0,1,3.32,3.47A14.35,14.35,0,0,1,278,94.85a10.29,10.29,0,0,1,.1,4.44,6.4,6.4,0,0,1-2.1,3.57,7.64,7.64,0,0,1-4.69,1.66,6.11,6.11,0,0,1-3.12-.59,6.69,6.69,0,0,1-2.3-1.86,7.1,7.1,0,0,1-1.32-2.69,6.13,6.13,0,0,1,0-3.08,13.23,13.23,0,0,0-3.17,1.22q-1.81.93-3.86,2.15t-4.1,2.59l-3.81,2.54v31.65l-8.79-8.5V93.68h-7.32L238.39,85h11.23V99.44q2.15-2.54,4.44-5.13a52.52,52.52,0,0,1,4.15-4.25q.78-.68,2-1.51A24,24,0,0,1,262.71,87a18.19,18.19,0,0,1,2.83-1.22A7.62,7.62,0,0,1,268.48,85.38ZM317.59,85a6.37,6.37,0,0,1,4.54,1.37q1.41,1.37,1.42,4.49v45.61l-6.25-6.06a28.89,28.89,0,0,1-6.89,4,30.91,30.91,0,0,1-9.57,2.44,25.45,25.45,0,0,1-10.11-1.07,16.39,16.39,0,0,1-8.5-6.54,9.44,9.44,0,0,1-1.17-2.44,18.47,18.47,0,0,1-.93-6.35,12.26,12.26,0,0,1,.44-3,12.46,12.46,0,0,1,1.56-3.52,12.8,12.8,0,0,1,2.2-2.54,13,13,0,0,1,2.64-1.81q1.41-.73,3-1.42a47.46,47.46,0,0,1,5.52-2.2q2.59-.83,5.62-1.9,1.56-.59,4-1.42a22.2,22.2,0,0,0,4.44-2.1,11.17,11.17,0,0,0,3.27-3,4.31,4.31,0,0,0,.54-4H284.38l4.88-8.6Zm-2.83,20.71-2.44.93q-2,.73-4.3,1.51t-4.49,1.56q-2.15.78-3,1.07a25.64,25.64,0,0,0-3.42,1.51,20.29,20.29,0,0,0-3.27,2.15,18,18,0,0,0-2.73,2.73,7.87,7.87,0,0,0-1.61,3.37,15.31,15.31,0,0,0-.49,6,7.1,7.1,0,0,0,1.51,3.61,5.83,5.83,0,0,0,2.73,1.76,10.31,10.31,0,0,0,3.32.44,16.69,16.69,0,0,0,3.22-.39q1.51-.34,2.39-.63a26.14,26.14,0,0,0,3.12-1.51,23.28,23.28,0,0,0,3.71-2.59,23.75,23.75,0,0,0,3.42-3.57,14.48,14.48,0,0,0,2.34-4.35Zm43-2.25q1,2.34,2.1,5t2.35,5.37q1.22,2.74,2.44,5.52t2.39,5.23q2.64,6,5.47,11.82h-5.67a6.68,6.68,0,0,1-3.22-1.08,6,6,0,0,1-2.64-2.93q-.88-2-2.1-4.54l-2.49-5.27q-1.27-2.69-2.49-5.23t-2.2-4.49a13.45,13.45,0,0,0-1.42-2.34,2.06,2.06,0,0,0-1.51-.83,4,4,0,0,0-2.1.63,31.09,31.09,0,0,0-3.08,2.05l-.73.54a5.43,5.43,0,0,1-.73.44l-.68.59v22.56l-8.79-8.5V73.27h-1.37a4.09,4.09,0,0,1-3.22-1.32,8.89,8.89,0,0,1-1.76-3,16.23,16.23,0,0,1-.88-4.3h16v42.68l23.34-22.17,5.08,7.42-12.79,9.57a5.55,5.55,0,0,1,.34.59Zm57.81,21.2a7.43,7.43,0,0,1-1.12,4.69,11.36,11.36,0,0,1-3.57,3.47,21.37,21.37,0,0,1-5.08,2.3,31.92,31.92,0,0,1-5.71,1.22,35.46,35.46,0,0,1-5.47.24,17.72,17.72,0,0,1-4.25-.59,19.2,19.2,0,0,1-10.16-7.67q-4.1-5.81-7.23-16.46l.78-2.73q1.27,2.93,2.93,6,1.37,2.54,3.27,5.47a40.31,40.31,0,0,0,4.15,5.37,10.69,10.69,0,0,0,5.47,3.22,18.71,18.71,0,0,0,6.45.44,17.25,17.25,0,0,0,6-1.71,9.88,9.88,0,0,0,4-3.32,4.8,4.8,0,0,0,.59-4.2q-.68-2.25-4.3-4.49-1.86-1.17-3.61-2.15a40.87,40.87,0,0,1-3.76-2.39q-2-1.42-4.44-3.52a66.52,66.52,0,0,1-5.57-5.52,12.34,12.34,0,0,1-3.13-5.76,8.72,8.72,0,0,1,.54-5.42,9.45,9.45,0,0,1,3.81-4.15,14.59,14.59,0,0,1,6.69-2h15.73l-4.88,8.6H391A1.87,1.87,0,0,0,389,94.9a5.22,5.22,0,0,0,.29,3.22,15,15,0,0,0,2.3,4,19.19,19.19,0,0,0,3.86,3.76,43.71,43.71,0,0,0,6.35,3.86,58.21,58.21,0,0,1,6.4,3.71,21.53,21.53,0,0,1,5,4.64A11.84,11.84,0,0,1,415.56,124.64Zm37.36-38.78q5.57-2.25,9-.68t3.47,5.76v45.52l-8.79-8.5V97.29q0-2.54-1.76-3.27t-4.39.73q-1.66.88-3.91,2.15t-4.64,2.69q-2.39,1.42-4.84,2.78l-4.39,2.44v31.65l-8.79-8.5V73.27h-1.27a4.09,4.09,0,0,1-3.22-1.32,8.88,8.88,0,0,1-1.76-3,16.28,16.28,0,0,1-.88-4.3H432.7V99.93l3.61-2.64,3.61-2.69,3.22-2.44q1.47-1.12,2.54-1.9,2-1.37,3.76-2.54A21.35,21.35,0,0,1,452.92,85.87Z"></path></svg>

Moved the width and height of the svgelement out of the inline styling, added max-width: 100% for responsiveness and some background for easier demonstration.