Creating a responsive SVG: Hiding paths on mobile devices - html

Question

I'm aiming to create a responsive SVG logo.
I've had some success in this so far, in that I can hide certain paths using media queries.
http://codepen.io/anon/pen/ZQmOMj
HTML:
<div class="svg-container">
<svg class="svgBranding" viewBox="0 0 799 163">
<path d="M91.064 30.349c2.672-5.246 8.434-15.089 14.528-16.022l-11.737 19.771c28.456 7.49 33.945-33.818 33.945-33.818 -44.764-3.138-40.057 20.952-36.736 30.069" class="svgBranding__apple" />
<path d="M123.425 101.105c-1.407 31.157-28.132 55.311-59.945 54.477 4.329 1.187 8.854 1.934 13.535 2.145 33.167 1.5 61.234-23.516 62.697-55.878 1.459-32.356-24.24-59.798-57.403-61.298 -4.655-0.211-9.202 0.119-13.595 0.897 31.721 2.079 56.117 28.529 54.711 59.657" class="svgBranding__coburg"/>
<path d="M66.7 41.588l0.572-36.223 13.695 3.624 -2.391 33.114 -11.876-0.515Z" class="svgBranding__coburg"/>
<path d="M211.046 124.787c-4.778 5.127-11.191 7.814-18.999 7.814 -15.275 0-26.464-10.498-26.464-26.001 0-15.978 11.771-28.45 29.61-28.45 9.092 0 14.921 3.384 14.921 7.582 0 2.331-1.514 3.729-3.382 3.729 -3.498 0-4.195-1.511-5.362-4.427 -1.168-3.037-2.447-4.432-7.346-4.432 -10.025 0-16.786 9.091-16.786 24.947 0 15.037 6.646 23.082 18.303 23.082 5.013 0 9.324-1.977 13.756-6.175l1.749 2.331Z" class="svgBranding__coburg svgBranding__desktop"/>
<path d="M226.904 105.433c0 15.738 5.944 24.597 16.204 24.597 10.842 0 16.786-8.512 16.786-25.06 0-15.854-6.413-24.484-16.673-24.484 -9.673 0-16.317 9.091-16.317 24.947M243.922 78.15c15.509 0 27.283 13.172 27.283 26.585 0 14.571-11.661 27.747-27.515 27.747 -15.86 0-28.094-11.079-28.094-27.165 0-15.74 12.819-27.167 28.326-27.167" class="svgBranding__coburg svgBranding__desktop"/>
<path d="M303.96 129.217c11.546 0 17.608-8.274 17.608-24.362 0-14.812-6.531-22.857-16.441-22.857 -8.509 0-13.871 5.599-13.871 14.223l0 19.586c0 8.981 4.308 13.41 12.704 13.41M291.604 85.617c4.198-4.899 9.328-6.998 16.557-6.998 14.224 0 24.131 10.608 24.131 25.998 0 17.255-10.142 27.747-26.23 27.747 -6.763 0-11.778-2.218-17.371-6.992l-6.879 6.642 0-72.048c0-7.229-0.466-7.927-7.929-8.39l0-2.215c4.432-0.237 10.263-1.285 17.721-2.799l0 39.055Z" class="svgBranding__coburg svgBranding__desktop"/>
<path d="M344.879 79.67c2.449 0 5.599-0.119 9.096-0.234l0 37.071c0 7.924 3.732 12.009 10.961 12.009 7.927 0 14.687-6.997 14.687-16.785l0-22.154 0-2.096c0-3.619-2.449-5.483-7.464-5.483l-0.929 0 0-2.562c3.613 0.115 6.879 0.234 9.676 0.234 2.452 0 5.483-0.119 8.98-0.234l0 38.588c0 6.292 1.164 8.509 6.992 8.509l1.398 0 0 2.446c-4.545 0-9.91 1.636-16.438 4.436l-1.865-11.775c-4.545 7.221-10.723 10.492-19 10.492 -13.413 0-17.258-6.413-17.258-18.187l0-24.368c0-1.169-0.116-1.864-0.116-2.096 0-3.619-2.449-5.483-7.345-5.483l-0.935 0 0-2.562c3.619 0.115 6.769 0.234 9.56 0.234" class="svgBranding__coburg svgBranding__desktop"/>
<path d="M420.193 90.277c3.616-7.342 9.91-11.308 16.441-11.308 5.941 0 9.325 2.565 9.325 6.178 0 2.915-1.632 4.664-3.96 4.664 -5.255 0-2.571-6.76-9.099-6.76 -6.413 0-11.775 5.59-11.775 15.735l0 23.67c0 4.661 2.331 5.944 8.393 6.06l0 2.449c-5.246-0.35-9.791-0.582-13.523-0.582 -3.5 0-8.043 0.116-13.52 0.582l0-2.449c5.938-0.116 8.387-1.515 8.387-5.834l0-1.864 0-26.815c0-7.686-1.867-10.254-8.274-10.254l-1.28 0 0-2.334c5.359-0.698 11.074-2.093 17.02-3.963 1.283 3.5 1.746 7.817 1.865 12.825" class="svgBranding__coburg svgBranding__desktop"/>
<path d="M457.34 97.041c0 10.26 4.54 16.088 11.65 16.088 7.229 0 11.78-5.715 11.78-16.907 0-9.905-5.014-15.735-12.131-15.735 -6.406 0-11.299 5.943-11.299 16.554M447.546 97.041c0-10.839 9.206-18.891 21.803-18.891 5.825 0 11.068 1.868 15.266 5.365 4.311-3.028 7.576-5.009 11.305-5.009 4.438 0 7.116 2.097 7.116 5.244 0 2.098-1.632 3.731-3.615 3.731 -3.382 0-4.311-4.316-7.812-4.316 -1.285 0-2.912 0.698-5.13 2.215 2.916 3.96 4.314 7.466 4.314 12.011 0 11.656-7.105 16.902-21.337 17.953 -8.393 0.579-14.339 0.932-14.339 5.362 0 3.726 5.017 3.726 15.158 3.847 17.953 0.235 26.702 4.896 26.702 18.187 0 12.247-9.794 20.168-26.583 20.168 -14.927 0-24.95-7.227-24.95-16.207 0-5.475 4.198-9.789 8.63-9.789 1.868 0 3.379 0.701 4.777 2.215 -3.734 0.932-5.83 4.076-5.83 8.859 0 7.229 6.997 12.006 17.72 12.006 12.125 0 18.538-5.005 18.538-13.523 0-9.678-7.229-11.187-20.052-11.308 -12.709-0.116-19.701-2.91-19.701-10.729 0-5.472 3.732-8.969 10.842-10.487 -8.161-2.909-12.822-9.209-12.822-16.904" class="svgBranding__coburg svgBranding__desktop"/>
<path d="M544.752 129.217c11.549 0 17.608-8.274 17.608-24.362 0-14.812-6.525-22.857-16.436-22.857 -8.508 0-13.879 5.599-13.879 14.223l0 19.586c0 8.981 4.32 13.41 12.707 13.41M532.393 85.617c4.206-4.899 9.336-6.998 16.557-6.998 14.221 0 24.136 10.608 24.136 25.998 0 17.255-10.15 27.747-26.232 27.747 -6.757 0-11.775-2.218-17.371-6.992l-6.876 6.642 0-72.048c0-7.229-0.469-7.927-7.927-8.39l0-2.215c4.427-0.237 10.258-1.285 17.713-2.799l0 39.055Z" class="svgBranding__apple svgBranding__desktop"/>
<path d="M590.917 119.307c0 5.481 2.918 8.625 8.167 8.625 4.432 0 13.176-3.845 13.176-11.19l0-15.269c-14.461 5.712-21.343 10.605-21.343 17.834M622.167 121.287c0 4.085 1.398 6.3 3.844 6.3 1.633 0 2.684-0.932 4.323-2.333l1.506 1.633c-2.444 3.844-5.71 5.596-10.261 5.596 -4.539 0-8.743-3.266-9.672-8.167 -5.6 5.251-12.941 8.048-19.235 8.048 -8.28 0-12.591-4.082-12.591-10.613 0-7.69 6.297-12.704 19.116-17.718l6.187-2.331c5.362-2.099 7.105-1.983 7.105-6.065l0-4.074c0-7.348-2.794-10.96-11.543-10.96 -5.596 0-9.317 2.098-9.907 5.598 -0.582 3.261-0.582 6.06-5.249 6.06 -2.218 0-3.845-1.87-3.845-4.311 0-5.014 6.757-9.684 20.173-9.684 13.63 0 20.049 4.317 20.049 13.413l0 29.608Z" class="svgBranding__apple svgBranding__desktop"/>
<path d="M652.829 89.227c4.658-7.461 10.836-10.839 19.232-10.839 10.958 0 17.252 5.245 17.252 15.268l0 28.801c0 4.661 2.337 5.943 8.393 6.059l0 2.45c-5.243-0.351-9.786-0.582-13.52-0.582 -3.489 0-8.049 0.115-13.523 0.582l0-2.45c5.949-0.116 8.396-1.514 8.396-5.833l0-1.865 0-26.458c0-8.28-3.611-12.362-10.961-12.362 -7.924 0-14.687 6.995-14.687 16.789l0 23.67c0 4.661 2.328 5.943 8.387 6.059l0 2.45c-5.243-0.351-9.786-0.582-13.523-0.582 -3.5 0-8.04 0.115-13.523 0.582l0-2.45c5.952-0.116 8.283-1.514 8.283-5.833 0-0.11 0.113-0.811 0.113-1.865l0-27.972c0-6.766-1.043-8.984-7.342-8.984l-1.054 0 0-2.328c4.551 0 9.916-1.629 16.444-4.429 1.042 3.613 1.517 7.689 1.633 12.122" class="svgBranding__apple svgBranding__desktop"/>
<path d="M720.557 104.854l7.464-7.814c6.184-6.534 9.556-10.492 9.556-12.709 0-1.862-1.63-2.212-5.709-2.916l0-2.093c5.13 0.229 8.625 0.466 10.727 0.466 2.79 0 5.48-0.237 8.393-0.466l0 2.093c-6.066 0.704-8.857 4.433-13.176 9.207l-8.734 9.797 22.26 22.153c3.266 3.26 5.602 5.593 9.091 5.944l0 2.449c-3.489-0.234-6.41-0.234-8.625-0.234 -0.695 0-2.918 0-6.644 0.234l-22.501-23.78 -2.102 1.861 0 13.41c0 4.661 2.336 5.944 8.399 6.06l0 2.449c-5.246-0.35-9.791-0.582-13.523-0.582 -3.5 0-8.043 0.116-13.526 0.582l0-2.449c5.949-0.116 8.393-1.514 8.393-5.834l0-1.864 0-61.322c0-4.889-1.746-6.059-7.464-6.059l-0.929 0 0-2.096c3.266-0.469 9.438-1.98 18.65-4.433l0 57.946Z" class="svgBranding__apple svgBranding__desktop"/>
<path d="M792.955 78.387l1.398 0c-0.113 3.61-0.234 6.992-0.234 10.139l0 3.5 -1.862 0c-1.164-6.757-6.531-11.309-12.009-11.309 -4.663 0-8.045 2.563-8.045 6.41 0 4.78 3.382 6.876 10.616 10.848 9.204 5.127 15.848 7.223 15.848 18.419 0 10.023-6.523 16.207-17.481 16.207 -4.779 0-9.565-1.755-13.062-4.786l-1.98 3.263 -1.051 0c0.116-4.308 0.116-6.876 0.116-7.808 0-1.867-0.116-4.543-0.116-8.165l1.633 0c1.629 9.21 7.573 14.696 14.573 14.696 5.71 0 10.142-3.848 10.142-8.746 0-5.831-4.432-8.28-11.893-12.125 -9.438-5.014-14.339-9.212-14.339-16.554 0-8.28 5.943-14.226 14.805-14.226 3.616 0 7.116 1.053 10.726 3.152l2.215-2.915Z" class="svgBranding__apple svgBranding__desktop"/>
<path d="M18.062 107.784c-9.62-27.107 6.436-57.291 35.908-67.957 -4.383 0.533-8.795 1.517-13.161 3.008 -30.947 10.585-47.934 41.985-37.948 70.14 9.993 28.149 43.176 42.393 74.118 31.809 4.346-1.483 8.4-3.388 12.158-5.629 -29.825 9.572-61.465-4.284-71.075-31.371" class="svgBranding__apple "/>
</svg>
</div>
SCSS:
/* colours */
$green: #a9b012;
$purple: #351456;
$white: #ffffff;
.svg-container {
flex: 1;
width: 300px;
height: 100px;
position: relative;
}
.svgBranding {
width: 100%;
height: auto;
position: absolute;
top: 5%;
left: 5%;
width: 90%;
height: 90%;
&__desktop {
display: none;
#media ( min-width: 768px ) { display: inline; }
}
&__apple { fill: $green; }
&__coburg {
fill: $purple;
.svgBranding--dark & { fill: $white; }
}
&__banks { fill: $green; }
}
However, I'm guessing due to the viewBox attribute on the SVG, the paths do not actual hide, which means the SVG doesn't adapt how I was hoping.
Does anyone know of a work around, or know of a solution that I could use?

Answer 1

I see in your pen that the name hides below 768px.
What do you mean with "the paths do not actual hide"?