Posts

Showing posts with the label svg

correct font in svg but wrong in html

Image
Clash Royale CLAN TAG #URR8PPP correct font in svg but wrong in html I build a logo with my custom font (DimaBarf.ttf) in svg format. this is my code: <svg width="276.7" height="93" xmlns="http://www.w3.org/2000/svg"> <defs> <style type="text/css"> @font-face { font-family: Barf; src: url('./DimaBarf.ttf'); } </style> </defs> <g> <title>background</title> <rect fill="#fff" height="93" width="276.7" y="0" x="0"/> </g> <g> <title>Layer 1</title> <rect rx="10" height="65" width="276.5" y="0" x="0" fill="#867965"/> <text stroke="#000" transform="matrix(4.871815023846745,0,0,5.305484790354967,-1448.1636560...
-
Read more

SVG contiues animation out of css (without css)

Image
Clash Royale CLAN TAG #URR8PPP SVG contiues animation out of css (without css) I am just over to learn svg animation with use of java-script. Or just simple svg animation. I would like get push to my animation to make it more simple. If you suggest me svg animation program for linux or simple browser software. Here is my code which I would like to simplify. SVG: <svg width="250" height="250"> <rect x="100" y="-75" width="150" height="150" id="r1" style="fill:red;stroke: rgb(252, 156, 156);stroke-width:10;opacity:0.25; stroke-radius:20;" transform="rotate(45)"></rect> <rect x="100" y="-75" width="125" height="125" id="r2" style="fill:red;stroke: rgb(252, 156, 156);stroke-width:10;opacity:0.25; stroke-radius:20;" transform="rotate(45)"></rect> <rect x="100" y="-75" width=...
-
Read more

Can you define multiple definitions inside a defs tag in SVG?

Image
Clash Royale CLAN TAG #URR8PPP Can you define multiple definitions inside a defs tag in SVG? Is it OK to use multiple definitions inside a single def tag at the root of the document? An example: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <svg width="0" height="0"> <defs> <linearGradient id="Gradient01"> <stop offset="20%" stop-color="#39F" /> <stop offset="90%" stop-color="#F3F" /> </linearGradient> <linearGradient id="Gradient02"> <stop offset="00%" stop-color="#3F3" /> <stop offset="50%" stop-color="#39F" /> <stop offset="90%" stop-color="#F55" /> ...
-
Read more