Namogo

<p>An Elementor widget that lets you add an SVG file as markup instead of an html image tag.</p>
<h3>How it works</h3>
<p>Elementor Inline SVG works much like the core Image widget from Elementor, except that it expects SVG files and outputs the file’s contents as markup in your page. This eliminates the extra HTTP request that otherwise occurs when using the  tag and allows for styling and interacting with the SVG elements through CSS and Javascript.</p>
<h3>Options</h3>
<ol>
<li>Max-width control that lets you specify a maximum width in pixels or percentage [responsive]</li>
<li>Custom aspect ratio to change the default aspect ration of the contents [responsive]</li>
<li>Alignment to left, center or right</li>
</ol>


Elementor Inline SVG

<p>This plugin displays the content of a file in a post. The content of the file<br />
(called a “snippet”) is put in a <code><pre></pre></code> block by default.</p>
<p>It has the following advantages over pasting the content of the file in your post<br />
yourself:</p>
<ul>
<li>When the file is modified, no need to modify the posts referring to it</li>
<li>Indentation is preserved by default (useful to show code snippets)</li>
<li>Can optionally provide a link to the file (no need to copy-paste your snippet)</li>
</ul>
<p>If requested (see the <code>preserveformat</code> parameter), the content of the file<br />
is put in a <code><div></div></code> block, with each line (delimited by<br />
the carriage return) in its own <code><p></p></code> block.</p>
<h4>Usage</h4>
<p>Syntax: <code>[file lang="some_lang" start="a_line_number" end="a_line_number" link="on_or_off" style="some_style_properties" preserveformat="on_or_off"]path/to/your/file[/file]</code></p>
<p>Note: The order of the attributes is mandatory!</p>
<h4>Example: Inlining of a file</h4>
<p>In your post, write <code>[file]path/to/your/file[/file]</code>. That’s it!</p>
<h4>Example: Using a syntax highlighter plugin</h4>
<p>If you write <code>[file lang="cpp"]path/to/your/file[/file]</code> (for instance),<br />
and if the syntax highlighter plugin you use supports<br />
the <code><pre lang="*"></pre></code> syntax (most does), then the content<br />
of your file will be processed by the syntax highlighter plugin as usual.</p>
<h4>Example: Provide a link to the file</h4>
<p>If you write <code>[file link="on"]path/to/your/file[/file]</code>, a link will<br />
be automatically added to the top left of the text area.</p>
<h4>Example: Inline a subset of a file</h4>
<p>If you write <code>[file start="10" end="20"]path/to/your/file[/file]</code>,<br />
only the lines 10 to 20 of the file will be displayed. You can omit the start<br />
(ie. “from beginning to line 20”) or the end (ie. “from line 10 to the end of<br />
the file”) if you want.</p>
<h4>Example: Set the color of the text to red</h4>
<p>In your post, write <code>[file style="color: #FF0000;"]path/to/your/file[/file]</code>.</p>
<h4>Example: Prevent the plugin to process a [file][/file] block</h4>
<p>Just write <code>[file off]your content[/file]</code>.</p>
<p>Note: The ‘off’ attribute must come BEFORE any other ones.</p>


File Inliner

This plugin displays the content of a file in a post.

Elementor Inline SVG vs File Inliner