|
|
Create HTML SVG Logo |
Example of HTML SVG Logo
Follow the Example
index.html
Example:
HTML
<svg height="130" width="500"> <defs> <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%"> <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" /> <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" /> </linearGradient> </defs> <ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad1)" /> <text fill="#ffffff" font-size="45" font-family="Verdana" x="50" y="86">SVG</text> Sorry, your browser does not support inline SVG.
</svg>
Output should be:
Full Example of HTML SVG Logo
Follow the Example
index.html
Example:
HTML
<!DOCTYPE html>
<html>
<body>
<svg height="130" width="500"> <defs> <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%"> <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" /> <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" /> </linearGradient> </defs> <ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad1)" /> <text fill="#ffffff" font-size="45" font-family="Verdana" x="50" y="86">SVG</text>
Sorry, your browser does not support inline SVG.
</svg>
</body>
</html>
Output should be:
| HTML SVG Graphics | HTML SVG Graphics |
| How to create HTML <svg> Circle Element | HTML SVG Graphics |
| How to create HTML SVG Rectangle | HTML SVG Graphics |
| How to design HTML SVG Rounded Rectangle | HTML SVG Graphics |
| How to design HTML SVG Star | HTML SVG Graphics |
| How to design HTML SVG Logo | HTML SVG Graphics |
| Differences Between SVG and Canvas | HTML SVG Graphics |
| Example of HTML SVG Logo | HTML SVG Graphics |
| Full Example of HTML SVG Logo | HTML SVG Graphics |
|
Category
: |
Web Tutorial |
|
Sub Category
: |
HTML SVG Graphics |
|
Uploaded by
: |
Admin |
Read Article https://horje.com/learn/1434/reference