vgavrilovskih

<p>SVG title plugin allows to create animated SVG images from text using Google fonts. After SVG title created, it can be used in a post or a text widget by adding a shortcode.</p>
<p><iframe loading="lazy" title="SVG Title plugin" width="750" height="422" src="https://www.youtube.com/embed/dXUzXqdmV9g?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe></p>
<p>SVG title options:</p>
<ul>
<li>Title: is the title you see in SVG.</li>
<li>Font Subset: is a font subset selector. Allows easier to select exact font by removing all other fonts in font selector without such subset.</li>
<li>Font: is a font that will be used to render title into SVG. All fonts taken from Google Font.</li>
<li>Variant: is one of possible variant of the selected font – italic, regular, bold, etc.</li>
<li>Size: is letters size of the title.</li>
<li>Stroke: width is stroke width in pixels.</li>
<li>Animation speed: in case you wish to add animation to the title, you can add four parameters:<br />
pause before outline drawing animation will start;<br />
duration of the outline drawing animation;<br />
pause before color filling animation will start;<br />
duration of the color filling animation;</li>
</ul>
<p>Animation starts if SVG title is visible.</p>
<ul>
<li>Outline color: is a color that used to paint the outline of the letters.</li>
<li>Text color: is a color that fills letters inside.</li>
</ul>


SVG Title

Allows to transform text title to SVG image using Google fonts collection, adding different colors and animation of appearance.

415 Plugins

<p><strong>NOW WITH DARK MODE!</strong>  Safely add an SVG favicon to your site! Don’t limit your site favicon to the .ico/png/jpg formats! Upload cool vector art from your favorite vector app in seconds! Support is common for SVG favicons in modern browsers. Favicon meta generated by the customizer will not be over-written, giving older browsers a fallback in the event they lack support SVG favicons.</p>
<h3>Usage</h3>
<p>Before uploading your SVG favicon, make sure the aspect ratio is 1:1. For Safari, create a copy of your SVG and do the following:</p>
<ul>
<li>Drop it to a single color (preferably black)</li>
<li>Merge art onto a single layer</li>
<li>Place it on a transparent background</li>
<li><strong>viewBox</strong> attribute must be set to “0 0 16 16”</li>
</ul>
<p><strong>Uploading</strong>: Under the SVG Favicon tab, click the “Upload SVG Favicon” field and upload your SVG favicon</p>
<p><strong>Manifest</strong>: After uploading your SVG favicon, you can fill out the corresponding manifest. This step is optional. If you already have your site manifest, leave “Use this site manifest” unchecked.</p>
<p><strong>Safari</strong>: The upload process for a pinned tab icon is the same as above. Please note that pinned tab icons should be 100% black with a transparent background. The mask icon color will determine the color of the pinned tab icon.</p>
<p><strong>Dark Mode (NEW)</strong>: Here is an example of how to enable dark mode in your svg favicon using the <code>prefers-color-scheme</code> media query:</p>
<pre><code><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16">
    <style>
        path.class-of-path {
            fill: #000;
        }
        @media (prefers-color-scheme: dark) {
            path.class-of-path {
                fill: #fff;
            }
        }
    </style>
    <path class="class-of-path" fill-rule="evenodd" d="M0 0h16v16H0z"/>
</svg>
</code></pre>
<h4>Credits</h4>
<ul>
<li>Artwork by <a href="https://www.onlinewebfonts.com/icon/" rel="nofollow ugc">Online Web Fonts</a> – <a href="https://creativecommons.org/licenses/by/3.0/" rel="nofollow ugc">license</a></li>
<li><a href="https://github.com/darylldoyle/svg-sanitizer" rel="nofollow ugc">SVG Sanitizer</a> – <a href="https://www.gnu.org/licenses/old-licenses/gpl-2.0.en.html" rel="nofollow ugc">license</a></li>
<li><a href="https://atomiks.github.io/tippyjs/" rel="nofollow ugc">Tippy.js</a> – <a href="https://opensource.org/licenses/MIT" rel="nofollow ugc">license</a></li>
<li><a href="https://github.com/Simonwep/pickr" rel="nofollow ugc">Picker</a> – <a href="https://opensource.org/licenses/MIT" rel="nofollow ugc">license</a></li>
</ul>


SVG Title vs SVG Favicon