I have an SVG logo that has been designed with the Nunito Sans font.
The font is showing correctly on the website only if the font is installed on the computer.
Please find below the code from the SVG image
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 501.58 501.58"><defs><style>.cls-1{fill:#243d62;stroke:#1d1d1b;stroke-miterlimit:10;}.cls-2{font-size:99.93px;fill:#fff;font-family:Nunito Sans;font-weight:700;}.cls-3{letter-spacing:-1px;}</style></defs><title>Logo512x512</title><circle class="cls-1" cx="250.79" cy="250.79" r="250.29"/><text class="cls-2" transform="translate(25.25 279.94)"><tspan class="cls-3">P</tspan><tspan x="64.66" y="0">acAnGO</tspan></text></svg>
I tried to save the fonts on the website but it never worked.
As the Nunito Sans belong to Google, is there a way to assign it though a web link?
If not what will be the correct code to link the font to the SVG logo?
Thanks
There are two solutions for this:
Before exporting in your logo in SVG make sure to convert your text to outlines. Normally you can do this in Sketch or Illustrator quite easily by pressing right mouse on the selected text. I converted it to curves with a program (Affinity Designer) and below is the result. This can be accomplished with any editor. If you the code you should see the logo as it is intended.
<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" viewBox="0 0 2090 2090" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-miterlimit:10;"><circle cx="1044.96" cy="1044.96" r="1042.88" style="fill:#243d62;stroke:#1d1d1b;stroke-width:4.17px;"/><g><path d="M136.853,872.872l128.243,0c31.367,0 55.795,7.842 73.282,23.525c17.488,15.684 26.232,37.682 26.232,65.996c-0,28.313 -8.744,50.381 -26.232,66.204c-17.487,15.822 -41.915,23.733 -73.282,23.733l-74.531,-0l0,114.087l-53.712,-0l-0,-293.545Zm121.581,138.237c36.919,-0 55.378,-16.1 55.378,-48.3c0,-16.377 -4.58,-28.521 -13.74,-36.433c-9.16,-7.911 -23.04,-11.866 -41.638,-11.866l-67.869,-0l0,96.599l67.869,-0Z" style="fill:#fff;fill-rule:nonzero;"/><g><path d="M489.128,957.813c28.591,-0 49.826,6.939 63.705,20.819c13.88,13.879 20.819,35.253 20.819,64.121l0,123.664l-49.548,-0l-0,-31.228c-4.719,10.825 -12.145,19.292 -22.276,25.398c-10.132,6.107 -21.86,9.161 -35.184,9.161c-13.602,-0 -25.954,-2.776 -37.057,-8.328c-11.104,-5.551 -19.848,-13.185 -26.232,-22.9c-6.385,-9.716 -9.577,-20.542 -9.577,-32.478c0,-14.989 3.817,-26.786 11.451,-35.392c7.633,-8.605 20.055,-14.85 37.265,-18.736c17.21,-3.887 40.944,-5.83 71.2,-5.83l10.41,0l-0,-9.576c-0,-13.879 -2.984,-23.872 -8.952,-29.979c-5.968,-6.107 -15.892,-9.161 -29.771,-9.161c-10.826,0 -22.138,1.874 -33.935,5.621c-11.797,3.748 -23.386,8.953 -34.767,15.615l-14.573,-35.809c11.381,-7.217 25.121,-13.185 41.221,-17.904c16.1,-4.719 31.367,-7.078 45.801,-7.078Zm-12.075,174.461c13.879,-0 25.191,-4.65 33.935,-13.949c8.744,-9.299 13.116,-21.304 13.116,-36.016l-0,-8.744l-7.495,0c-18.598,0 -33.033,0.833 -43.303,2.498c-10.271,1.666 -17.627,4.58 -22.068,8.744c-4.441,4.164 -6.662,9.854 -6.662,17.072c0,8.882 3.053,16.169 9.16,21.859c6.107,5.691 13.879,8.536 23.317,8.536Z" style="fill:#fff;fill-rule:nonzero;"/><path d="M719.384,1169.75c-21.374,-0 -39.903,-4.303 -55.587,-12.908c-15.683,-8.605 -27.688,-20.819 -36.016,-36.641c-8.327,-15.822 -12.491,-34.282 -12.491,-55.378c-0,-21.096 4.372,-39.764 13.116,-56.002c8.743,-16.239 21.165,-28.8 37.265,-37.682c16.1,-8.883 34.698,-13.324 55.794,-13.324c14.435,-0 28.522,2.29 42.262,6.87c13.741,4.58 24.775,10.756 33.102,18.529l-14.989,36.641c-8.605,-6.94 -17.696,-12.214 -27.273,-15.823c-9.576,-3.608 -19.084,-5.412 -28.521,-5.412c-18.043,-0 -32.061,5.621 -42.054,16.863c-9.993,11.242 -14.99,27.411 -14.99,48.507c0,20.819 4.997,36.85 14.99,48.092c9.993,11.242 24.011,16.863 42.053,16.863c9.438,-0 18.946,-1.804 28.522,-5.413c9.577,-3.609 18.668,-8.883 27.273,-15.822l14.989,36.224c-8.882,8.05 -20.263,14.365 -34.143,18.945c-13.879,4.581 -28.313,6.871 -43.303,6.871Z" style="fill:#fff;fill-rule:nonzero;"/><path d="M1058.73,1166.42l-29.562,-68.702l-142.817,-0l-29.563,68.702l-54.129,-0l132.824,-293.545l43.719,0l132.824,293.545l-53.296,-0Zm-154.891,-110.34l107.424,0l-53.712,-124.912l-53.712,124.912Z" style="fill:#fff;fill-rule:nonzero;"/><path d="M1256.92,957.813c24.427,-0 42.609,6.939 54.545,20.819c11.936,13.879 17.904,34.836 17.904,62.872l-0,124.913l-52.047,-0l0,-121.998c0,-15.822 -2.984,-27.342 -8.952,-34.559c-5.968,-7.217 -15.337,-10.826 -28.105,-10.826c-14.99,-0 -26.995,4.719 -36.017,14.157c-9.021,9.438 -13.532,22.068 -13.532,37.89l0,115.336l-52.047,-0l0,-203.608l50.798,0l-0,30.396c6.939,-11.381 16.239,-20.125 27.897,-26.232c11.659,-6.107 24.844,-9.16 39.556,-9.16Z" style="fill:#fff;fill-rule:nonzero;"/><path d="M1631.66,1007.78l0,140.735c-13.324,6.662 -29.493,11.936 -48.508,15.822c-19.014,3.886 -38.375,5.829 -58.084,5.829c-30.256,0 -56.488,-6.037 -78.695,-18.112c-22.206,-12.075 -39.208,-29.424 -51.006,-52.047c-11.797,-22.623 -17.696,-49.479 -17.696,-80.569c0,-30.811 5.899,-57.529 17.696,-80.152c11.798,-22.623 28.591,-39.972 50.382,-52.047c21.79,-12.075 47.397,-18.112 76.821,-18.112c20.541,-0 39.833,2.984 57.876,8.952c18.043,5.968 33.032,14.504 44.969,25.607l-17.905,38.723c-13.601,-10.548 -26.995,-18.112 -40.18,-22.693c-13.185,-4.58 -27.689,-6.87 -43.511,-6.87c-30.257,0 -53.088,8.952 -68.494,26.856c-15.406,17.905 -23.109,44.483 -23.109,79.736c0,72.172 31.645,108.258 94.934,108.258c18.876,-0 37.751,-2.637 56.627,-7.911l0,-73.699l-63.289,0l0,-38.306l111.172,-0Z" style="fill:#fff;fill-rule:nonzero;"/><path d="M1822.78,1170.16c-28.591,0 -53.365,-6.107 -74.323,-18.32c-20.957,-12.214 -37.126,-29.702 -48.507,-52.464c-11.381,-22.762 -17.072,-49.41 -17.072,-79.944c0,-30.534 5.621,-57.112 16.863,-79.736c11.243,-22.623 27.412,-40.041 48.508,-52.255c21.096,-12.213 45.94,-18.32 74.531,-18.32c28.591,-0 53.366,6.107 74.323,18.32c20.958,12.214 37.058,29.632 48.3,52.255c11.242,22.624 16.863,49.202 16.863,79.736c-0,30.534 -5.691,57.182 -17.072,79.944c-11.38,22.762 -27.55,40.25 -48.507,52.464c-20.958,12.213 -45.593,18.32 -73.907,18.32Zm0,-42.887c26.926,0 47.953,-9.299 63.081,-27.897c15.128,-18.598 22.692,-45.246 22.692,-79.944c0,-34.698 -7.564,-61.276 -22.692,-79.736c-15.128,-18.459 -36.155,-27.688 -63.081,-27.688c-27.203,-0 -48.369,9.229 -63.497,27.688c-15.128,18.46 -22.692,45.038 -22.692,79.736c-0,34.698 7.564,61.346 22.692,79.944c15.128,18.598 36.294,27.897 63.497,27.897Z" style="fill:#fff;fill-rule:nonzero;"/></g></g></svg>
Include nunito sans through google fonts in your tag in your document. You can select styles here. Then for embed, choose link (for html) or #import (if you want to include through CSS) and copy paste that link to your html or css file. You'll need the html provided by google.
From this link, I generate a SVG file from a Postscript (itself made by latex) :
inkscape example.ps --export-plain-svg example.svg
example.ps comes from example.tex below :
\begin{document}
\begin{pspicture}(-4,-2.5)(6,2.5)
\rput(-4,1.5){light\,(1\,:\,yes,\,0\,:\,no)}
\rput(-4,-0.5){noise\,(1\,:\,yes,\,0\,:\,no)}
\rput(5,1.5){eyes\,(0\,:\,closed,\,1\,:\,opened)}
\rput(5,-0.5){voice\,(00\,:\,snore,\,01\,:\,laugh,\,10:\,growl,\,11:\,cry)}
\rput(0,0){Robot toy module}
\psframe(-1.5,-2)(1.5,2)
\psline{->}(-1.5,1)(-4,1)
\psline{->}(-1.5,-1)(-4,-1)
\psline{->}(1.5,1)(4,1)
\psline{->}(1.5,-1)(4,-1)
\psline{-}(2.5,-1.2)(2.9,-0.8)
\rput(2.7,-1.4){2}
\psline{-}(-0.2,-2)(0,-1.7)
\psline{-}(0.2,-2)(0,-1.7)
\psline{-}(0,-2)(0,-2.4)
\rput(0,-2.6){H}
\end{pspicture}
\end{document}
Now I would like to include into a HTML page with a fine position, i.e at the top of parent container.
Unfortunately, I have troubles to adjust the parameters of position from the SVG file into HTML ; for example, I put into HTML page :
<object data="example.svg" width="700 " height="400 " type="image/svg+xml">
and "example.svg" (just created vith inkscape) contains :
viewBox="0 0 743.75 1052.5"
height="1052.5"
width="743.75"
But the result (visible on this link) is not good, since SVG is too small.
The SVG file is located on the following link.
I took width="700 " height="400 for <object> because it would be, like for a standard image into <img> tag, a fine size (and so position) for the SVG into HTML page.
Maybe this problem comes from width and height offsets for SVG "example.svg" file (seen when I visualize it directly in browser : check here )
I tried to set 700 and 400 in viewBox and also for height width :
viewBox="0 0 700 400"
height="400"
width="700"
The result is visible here. For width, it may be acceptable but I have still this large vertical offset (I mean blank space) with the top "title" ("Coding > Robot module").
Is there a general rule to apply for positioning a SVG file without offset. (or at least with a small offset like with an image).
PS: I would like to keep the <object> tag to include the SVG into HTML.
The problem is that the SVG generated by LaTeX is for the whole page, and the viewBox it sets represents the page.
To get the diagram in the middle of the page to scale and fit whatever size you want it to, you need to update the viewBox so that it reflexts the bounding box of (just) your diagram.
So it turns out that the appropriate viewBox to use is approximately:
viewBox="134 174 489 168"
If you set it to that (and update your width and height) you will end up with an SVG that behaves as you want.
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
viewBox="134 174 489 168"
height="168"
width="489"
xml:space="preserve"
version="1.1"
id="svg2"><metadata
id="metadata8"><rdf:RDF><cc:Work
rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><defs
id="defs6" /><g
transform="matrix(1.25,0,0,-1.25,0,1052.5)"
id="g10"><g
transform="scale(0.1,0.1)"
id="g12"><g
transform="scale(10,10)"
id="g14"><text
id="text16"
style="font-variant:normal;font-weight:normal;font-size:9.96263981px;font-family:CMR10;-inkscape-font-specification:CMR10;writing-mode:lr-tb;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
transform="matrix(1,0,0,-1,108.974,686.3)"><tspan
id="tspan18"
y="0"
x="0 2.7596512 5.5193024 10.559301 15.839153 21.359074 25.199078 31.798918 36.238419 41.278271 45.718269 49.678268 53.997841 60.597839 65.037338 70.557343 75.597343">light(1:yes,0:no)</tspan><tspan
id="tspan20"
y="56.6926"
x="-0.96015602 4.559844 9.599843 12.359494 16.319492 22.319571 26.159575 32.759415 37.198917 42.238766 46.678768 50.638767 54.958336 61.678257 66.11776 71.637756 76.677757">noise(1:yes,0:no)</tspan><tspan
id="tspan22"
y="0"
x="239.63785 244.07784 249.11792 253.55791 259.07809 262.91806 269.51791 273.9574 278.3974 281.15704 286.19702 290.15704 294.59705 300.11703 304.43674 311.15668 315.47626 320.51627 326.27628 330.71631 336.23633 340.67636 346.19638">eyes(0:closed,1:opened)</tspan><tspan
id="tspan24"
y="56.6926"
x="200.39804 205.43788 210.47787 213.23752 217.67751 223.67735 227.51735 232.55736 239.15742 243.59691 247.55693 253.07692 258.11691 262.07693 266.51691 270.8364 275.8764 282.35632 286.79581 289.55545 294.59546 300.11545 305.15546 310.67545 315.11502 320.15503 325.19504 329.51471 334.55472 338.51471 343.31473 350.51474 353.27438 357.47418 362.51419 367.5542 371.87387 376.31387 380.27386 385.55386">voice(00:snore,01:laugh,10:growl,11:cry)</tspan><tspan
id="tspan26"
y="42.5196"
x="113.50584 120.82584 125.86586 131.62576 136.66576 143.74568 147.58568 152.38553 160.90544 169.18546 174.46559 179.98558 185.50557 188.26523">Robottoymodule</tspan></text>
</g><path
id="path28"
style="fill:none;stroke:#000000;stroke-width:7.97010994;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
d="m 2199.59,6461.8 0,562.94 842.42,0 0,-1125.88 -842.42,0 0,562.94 z" /><path
id="path30"
style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
d="m 1530.18,6760.71 -43.24,-15.44 43.24,-15.45 -17.29,15.45" /><path
id="path32"
style="fill:none;stroke:#000000;stroke-width:7.97010994;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
d="m 2195.6,6745.27 -682.71,0" /><path
id="path34"
style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
d="m 1530.18,6193.78 -43.24,-15.44 43.24,-15.45 -17.29,15.45" /><path
id="path36"
style="fill:none;stroke:#000000;stroke-width:7.97010994;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
d="m 2195.6,6178.34 -682.71,0" /><path
id="path38"
style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
d="m 3711.42,6729.82 43.24,15.45 -43.24,15.44 17.29,-15.44" /><path
id="path40"
style="fill:none;stroke:#000000;stroke-width:7.97010994;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
d="m 3046,6745.27 682.71,0" /><path
id="path42"
style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
d="m 3711.42,6162.89 43.24,15.45 -43.24,15.44 17.29,-15.44" /><path
id="path44"
style="fill:none;stroke:#000000;stroke-width:7.97010994;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
d="m 3046,6178.34 682.71,0" /><path
id="path46"
style="fill:none;stroke:#000000;stroke-width:7.97010994;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
d="m 3329.46,6121.64 113.38,113.39" /><g
transform="scale(10,10)"
id="g48"><text
id="text50"
style="font-variant:normal;font-weight:normal;font-size:9.96263981px;font-family:CMR10;-inkscape-font-specification:CMR10;writing-mode:lr-tb;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
transform="matrix(1,0,0,-1,336.095,603.375)"><tspan
id="tspan52"
y="0"
x="0">2</tspan></text>
</g><path
id="path54"
style="fill:none;stroke:#000000;stroke-width:7.97010994;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
d="m 2564.11,5894.87 56.69,85.04" /><path
id="path56"
style="fill:none;stroke:#000000;stroke-width:7.97010994;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
d="m 2677.49,5894.87 -56.69,85.04" /><path
id="path58"
style="fill:none;stroke:#000000;stroke-width:7.97010994;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
d="m 2620.8,5894.87 0,-113.38" /><g
transform="scale(10,10)"
id="g60"><text
id="text62"
style="font-variant:normal;font-weight:normal;font-size:9.96263981px;font-family:CMR10;-inkscape-font-specification:CMR10;writing-mode:lr-tb;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
transform="matrix(1,0,0,-1,258.36,569.119)"><tspan
id="tspan64"
y="0"
x="0">H</tspan><tspan
id="tspan66"
y="429.819"
x="44.7598">1</tspan></text>
</g></g></g></svg>
If you need your diagram to scale and fit its parent container. Set both width and height to "100%".
I've looked around for about an hour only to resort to SO; I found https://css-tricks.com/svg-shape-morphing-works/ . This tutorial says "create two svg's with same amount of points" and then randomly jumps to:
<svg viewBox="0 0 194.6 185.1">
<polygon fill="#FFD41D" points=" ... shape 1 points ... ">
</polygon>
</svg>
There are no references to either of the SVG images after creation. The tutorial doesn't explain whats going on... or what to do with the images I created - I'm assuming these "points" are some sort of co-ordinate system that plot out the image, and the value for the viewbox attribute seem random - .
I looked at other solutions such as GreenSocks svgmorphing tool but for the task of morphing two 40px images together it seemed over-complicated having to go through learning all the syntax ect.
( The two images are located at:
http://tobi.freetzi.com/arr.svg and
http://tobi.freetzi.com/add.svg
)
The two paths that you are morphing between have to have the same number and type of path commands. Path commands are the single letters that appear in your path definition d="". You can read more about them in the SVG spec.
In your first SVG (arr.svg) there are X commands:
arr.svg add.svg
-------------- --------------
M12.222,13.293 M29.000,22.000
L7.000,13.000 L22.000,22.000
L17.172,23.899 L22.000,29.000
L17.172,23.899 L18.000,33.000
L20.000,26.728 L18.000,22.000
L20.000,26.728 L7.000,22.000
L20.000,26.728 L10.000,18.000
L22.828,23.899 L18.000,18.000
L22.828,23.899 L18.000,10.000
L33.000,13.000 L22.000,7.000
L27.778,13.293 L22.000,18.000
L20.000,21.071 L32.000,18.000
L14.343,15.414 L29.000,22.000
Z
Your two SVGs almost match. If you add a 'Z' to the first one, you should be able to animate them.
<svg viewBox="0 0 121.5 60.834">
<path d="">
<animate attributeName="d" dur="2s" repeatCount="indefinite"
keyTimes="0;0.5;1"
values="M12.222,13.293 L7.000,13.000 L17.172,23.899 L17.172,23.899 L20.000,26.728 L20.000,26.728 L20.000,26.728 L22.828,23.899 L22.828,23.899 L33.000,13.000 L27.778,13.293 L20.000,21.071 L14.343,15.414 Z;
M29.000,22.000 L22.000,22.000 L22.000,29.000 L18.000,33.000 L18.000,22.000 L7.000,22.000 L10.000,18.000 L18.000,18.000 L18.000,10.000 L22.000,7.000 L22.000,18.000 L32.000,18.000 L29.000,22.000 Z;
M12.222,13.293 L7.000,13.000 L17.172,23.899 L17.172,23.899 L20.000,26.728 L20.000,26.728 L20.000,26.728 L22.828,23.899 L22.828,23.899 L33.000,13.000 L27.778,13.293 L20.000,21.071 L14.343,15.414 Z"/>
</path>
</svg>