Website Design

<aSVG 101: What Is SVG?

Posted on by Site Admin
11
Aug

SVG 101: What Is SVG?-SitePoint</p> <h4 class="t10axsgu"> < meta data-react-helmet ="real"home="twitter: account_id "material="15743570"> </p> <p>< link rel ="apple-touch-icon" sizes="48x48"href ="/ icons/icon -48 x48.png?v=e11847cefe0aa15a5bc8386ead113f61"> < link as ="script "rel=" preload "href="/ styles-8d3db5124725dcff78a7. js" >< link as="script"rel ="preload"href="/ linaria-e414464eed14ce76e1a4. js ">< link as= "script"rel= "preload"href ="/ 666dde8597d1f9d1c775385416e6ca4aab230ec4-5af9165cfe62b5d6d9ba. js">< link as="script "rel ="preload"href= "/ commons-adaebfdbeae3f96d4241. js" >< link as=" script" rel ="preload"href="/ webpack-runtime-25189bc946c58162b369. js"> Avoid to primary material<span class="token attr-value"><span class="token punctuation">Free JavaScript Reserve!<span class="token punctuation"> Write effective, maintainable and tidy JavaScript.RRP $ 11.95 Though it was developed back in the late 1990s, SVG remains in lots of methods the”unsightly duckling “file format that matured to <strong>end up being a swan. Inadequately supported and mostly disregarded for the majority of the 2000s, given that around 2017 all modern-day web internet browsers have actually been rendering SVG without severe concerns, and many vector drawing programs have actually been providing the</p> <p>choice to <a href="https://en.wikipedia.org/wiki/World_Wide_Web_Consortium">export SVG, which has absolutely end up being an extensively utilized graphic format online. This hasn’t taken place by opportunity. Standard raster graphic file formats like PNGs and jpgs are best for pictures or extremely intricate images, it turns out that SVG is the one graphic format that the majority of carefully satisfies present web advancement<br /> A lot ofdemands needs scalability, responsiveness, interactivity, performance, programmabilityEfficiency and accessibilityAvailability< img src ="https://dab1nmslvvntp.cloudfront.net/wp-content/uploads/2017/12/1498798784svg101.svg"alt= "SVG 101 Header"class="aligncenter size-full wp-image-156634 <p>“loading=”lazy”> This guide was upgraded in August 2020. What Is SVG and Why Should You Utilize It? SVG is an eXtensible Markup Language(XML )- based vector graphic format for the Web and other environments. XML utilizes tags like HTML, although it’s more stringent. You can not, for instance, leave out a closing tag considering that this will make the file void and the SVG will not be rendered. To provide you a taste</p> <p>of what SVG code appears like, here’s how you would draw a white circle with a black border: As you can see, under the hood, SVG files are absolutely nothing more than easy plain text files that explain lines, curves, shapes, colors, and text. As it’s human-readable, flexible and quickly reasonable, when embedded in an HTML file as an inline SVG, SVG code can be controlled through CSS or</p> <h3>JavaScript. This provides SVG a versatility and flexibility that can’t ever be matched by conventional PNG, GIF or JPG graphic formats. SVG is a W3C requirement, which indicates that it can inter-operate quickly with other open basic languages and innovations consisting of JavaScript, DOM, CSS, and HTML. As long as the W3C sets the international market requirements, it’s most likely that SVG will continue to be the de facto requirement for vector graphics in the internet browser. The awesomeness of SVG is that it can resolve a number of the most vexing issues in contemporary web advancement. Let’s breeze through a few of them. Scalability and responsiveness Under the hood, SVG utilizes shapes, numbers and collaborates instead of a pixel grid to render graphics in the web browser, that makes it definitely scalable and resolution-independent. If you consider it, the directions for producing a circle are the very same whether you’re utilizing</p> <p>a pen or a skywriting airplane. Just the scale modifications. With SVG, you can integrate various shapes, courses and text aspects to develop all type of visuals, and you’ll make certain they’ll look crisp and clear at any size. On the other hand, raster-based formats like GIF, JPG, and PNG have actually repaired measurements, which trigger them to pixelate when they’re scaled. Numerous responsive image methods have actually shown important for</p> <h3>pixel graphics, they’ll never ever be able <a href="http://codepen.io/jjperezaguinaga/pen/yuBdq">to really contend <a href="http://codepen.io/thiennhat/pen/BNByzJ">with SVG’s capability to scale forever. Programmability and interactivity SVG is scriptable and totally editable. All</a> sort of interactions and animations can be contributed to an inline SVG graphic by means of CSS and/or JavaScript. Ease of access SVG files are text-based, so when embedded in a websites, they can be browsed and indexed. This makes them available to evaluate readers, online search engine and other gadgets. Efficiency Among the most essential elements affecting web efficiency is the size of the files utilized on a websites. SVG graphics are generally <a href="http://codepen.io/dudleystorey/pen/zKBVPm">smaller sized in size compared to bitmap file</p> <h3>formats. Typical Usage Cases and</h3> <p>Web browser Assistance SVG has an avalanche of useful usage cases. Let’s check out the most considerable of them. <a href="https://codepen.io/collection/nGoLEj/">Plain illustrations and diagrams Any conventional</a> illustration that provides itself to being produced utilizing pen and pencil must equate completely into the SVG format. Icons and logo designs Icons and logo designs need to be sharp and clear at any size– be it the size of a button or</p> <h3>that of a signboard– that makes them perfect prospects for SVG. SVG icons are more available and are much simpler to place. Animations You can develop attractive animations, consisting of cool line illustration impacts utilizing SVG graphics. SVG code can communicate with CSS animation, as well as JavaScript and its own integrated SMIL animation performance.</p> <p> Interactivity(charts, charts, infographics, maps)SVG can be utilized to outline information and upgrade it dynamically based upon user actions or other occasions. See Interactive SVG Infographic and SVG Interactive Roadtrip Map. Unique impacts Numerous live results can be attained by utilizing SVG, consisting of shape changing or various gooey results. Structure user interfaces and applications SVG allows you to make advanced user interfaces that you can incorporate with HTML5, web-based applications, and abundant web applications(RIAs). As you can see, SVG is utilized</p> <p>practically all over and in numerous circumstances. Fortunately about all this is that internet browser assistance for SVG is terrific, as you can look for yourself on caniuse.com. Now you understand what SVGs are and why they’re remarkable for the Web. As a next action, I advise you take a look at Craig’s post on the different methods to utilize CSS with SVG, and methods to consist of SVGs in a websites and control them</a>. Or if you wish to dive in deep, have a look at the book <em><a href="https://www.sitepoint.com/premium/books/practical-svg">Practical SVG</a></em>, by Chris Coyier.</p> <p></body></section> </div> </article> </div> <p></main></p> <footer class="syzew71"> <nav aria-label="Footer navigation"></nav> </footer> </div> </div> <p></body> </p> <div class="blog-share text-center"><div class="is-divider medium"></div><div class="social-icons share-icons share-row relative" ><a href="whatsapp://send?text=%26lt%3BaSVG%20101%3A%20What%20Is%20SVG%3F - https://websitedesign-usa.com/svg-101-what-is-svg/" data-action="share/whatsapp/share" class="icon button circle is-outline tooltip whatsapp show-for-medium" title="Share on WhatsApp"><i class="icon-whatsapp"></i></a><a href="//www.facebook.com/sharer.php?u=https://websitedesign-usa.com/svg-101-what-is-svg/" data-label="Facebook" onclick="window.open(this.href,this.title,'width=500,height=500,top=300px,left=300px'); return false;" rel="noopener noreferrer nofollow" target="_blank" class="icon button circle is-outline tooltip facebook" title="Share on Facebook"><i class="icon-facebook" ></i></a><a href="//twitter.com/share?url=https://websitedesign-usa.com/svg-101-what-is-svg/" onclick="window.open(this.href,this.title,'width=500,height=500,top=300px,left=300px'); return false;" rel="noopener noreferrer nofollow" target="_blank" class="icon button circle is-outline tooltip twitter" title="Share on Twitter"><i class="icon-twitter" ></i></a><a href="mailto:enteryour@addresshere.com?subject=%26lt%3BaSVG%20101%3A%20What%20Is%20SVG%3F&body=Check%20this%20out:%20https://websitedesign-usa.com/svg-101-what-is-svg/" rel="nofollow" class="icon button circle is-outline tooltip email" title="Email to a Friend"><i class="icon-envelop" ></i></a><a href="//pinterest.com/pin/create/button/?url=https://websitedesign-usa.com/svg-101-what-is-svg/&media=https://websitedesign-usa.com/wp-content/uploads/2020/09/unnamed-file-700x368.jpg&description=%26lt%3BaSVG%20101%3A%20What%20Is%20SVG%3F" onclick="window.open(this.href,this.title,'width=500,height=500,top=300px,left=300px'); return false;" rel="noopener noreferrer nofollow" target="_blank" class="icon button circle is-outline tooltip pinterest" title="Pin on Pinterest"><i class="icon-pinterest" ></i></a><a href="//www.linkedin.com/shareArticle?mini=true&url=https://websitedesign-usa.com/svg-101-what-is-svg/&title=%26lt%3BaSVG%20101%3A%20What%20Is%20SVG%3F" onclick="window.open(this.href,this.title,'width=500,height=500,top=300px,left=300px'); return false;" rel="noopener noreferrer nofollow" target="_blank" class="icon button circle is-outline tooltip linkedin" title="Share on LinkedIn"><i class="icon-linkedin" ></i></a></div></div></div> <footer class="entry-meta text-center"> This entry was posted in <a href="https://websitedesign-usa.com/category/website-design/" rel="category tag">Website Design</a>. Bookmark the <a href="https://websitedesign-usa.com/svg-101-what-is-svg/" title="Permalink to <aSVG 101: What Is SVG?" rel="bookmark">permalink</a>. </footer> <div class="entry-author author-box"> <div class="flex-row align-top"> <div class="flex-col mr circle"> <div class="blog-author-image"> <img alt='' src="data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2090%2090%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3C%2Fsvg%3E" data-src='https://secure.gravatar.com/avatar/26ce137576cd47ac1c1ae35caaa58a12?s=90&d=mm&r=g' srcset="" data-srcset='https://secure.gravatar.com/avatar/26ce137576cd47ac1c1ae35caaa58a12?s=180&d=mm&r=g 2x' class='lazy-load avatar avatar-90 photo' height='90' width='90' loading='lazy'/> </div> </div> <div class="flex-col flex-grow"> <h5 class="author-name uppercase pt-half"> Site Admin </h5> <p class="author-desc small"></p> </div> </div> </div> <nav role="navigation" id="nav-below" class="navigation-post"> <div class="flex-row next-prev-nav bt bb"> <div class="flex-col flex-grow nav-prev text-left"> <div class="nav-previous"><a href="https://websitedesign-usa.com/republishing-content-how-to-update-old-blog-posts-for-seo/" rel="prev"><span class="hide-for-small"><i class="icon-angle-left" ></i></span> Republishing Content: How to Update Old Blog Posts for SEO</a></div> </div> <div class="flex-col flex-grow nav-next text-right"> <div class="nav-next"><a href="https://websitedesign-usa.com/greensock-3-web-animation-get-to-know-gsaps-new-features/" rel="next">GreenSock 3 Web Animation: Get to Know GSAP’s New Features <span class="hide-for-small"><i class="icon-angle-right" ></i></span></a></div> </div> </div> </nav> </div> </article> <div id="comments" class="comments-area"> <div id="respond" class="comment-respond"> <h3 id="reply-title" class="comment-reply-title">Leave a Reply <small><a rel="nofollow" id="cancel-comment-reply-link" href="/svg-101-what-is-svg/#respond" style="display:none;">Cancel reply</a></small></h3><form action="https://websitedesign-usa.com/wp-comments-post.php" method="post" id="commentform" class="comment-form" novalidate><p class="comment-notes"><span id="email-notes">Your email address will not be published.</span> Required fields are marked <span class="required">*</span></p><p class="comment-form-comment"><label for="comment">Comment</label> <textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525" required="required"></textarea></p><p class="comment-form-author"><label for="author">Name <span class="required">*</span></label> <input id="author" name="author" type="text" value="" size="30" maxlength="245" required='required' /></p> <p class="comment-form-email"><label for="email">Email <span class="required">*</span></label> <input id="email" name="email" type="email" value="" size="30" maxlength="100" aria-describedby="email-notes" required='required' /></p> <p class="comment-form-url"><label for="url">Website</label> <input id="url" name="url" type="url" value="" size="30" maxlength="200" /></p> <p class="comment-form-cookies-consent"><input id="wp-comment-cookies-consent" name="wp-comment-cookies-consent" type="checkbox" value="yes" /> <label for="wp-comment-cookies-consent">Save my name, email, and website in this browser for the next time I comment.</label></p> <p class="form-submit"><input name="submit" type="submit" id="submit" class="submit" value="Post Comment" /> <input type='hidden' name='comment_post_ID' value='14951' id='comment_post_ID' /> <input type='hidden' name='comment_parent' id='comment_parent' value='0' /> </p><!-- Anti-spam plugin wordpress.org/plugins/anti-spam/ --><div class="wantispam-required-fields"><input type="hidden" name="wantispam_t" class="wantispam-control wantispam-control-t" value="1614758930" /><div class="wantispam-group wantispam-group-q" style="clear: both;"> <label>Current ye@r <span class="required">*</span></label> <input type="hidden" name="wantispam_a" class="wantispam-control wantispam-control-a" value="2021" /> <input type="text" name="wantispam_q" class="wantispam-control wantispam-control-q" value="7.2.5" autocomplete="off" /> </div> <div class="wantispam-group wantispam-group-e" style="display: none;"> <label>Leave this field empty</label> <input type="text" name="wantispam_e_email_url_website" class="wantispam-control wantispam-control-e" value="" autocomplete="off" /> </div> </div><!--\End Anti-spam plugin --></form> </div><!-- #respond --> </div> </div> <div class="post-sidebar large-3 col"> <div id="secondary" class="widget-area " role="complementary"> <aside id="search-2" class="widget widget_search"><form method="get" class="searchform" action="https://websitedesign-usa.com/" role="search"> <div class="flex-row relative"> <div class="flex-col flex-grow"> <input type="search" class="search-field mb-0" name="s" value="" id="s" placeholder="Search…" /> </div> <div class="flex-col"> <button type="submit" class="ux-search-submit submit-button secondary button icon mb-0" aria-label="Submit"> <i class="icon-search" ></i> </button> </div> </div> <div class="live-search-results text-left z-top"></div> </form> </aside> <aside id="recent-posts-2" class="widget widget_recent_entries"> <span class="widget-title "><span>Recent Posts</span></span><div class="is-divider small"></div> <ul> <li> <a href="https://websitedesign-usa.com/recreating-the-music-artist-wordpress-theme-homepage-with-the-block-editor/">Recreating the Music Artist WordPress Style Homepage With the Block Editor</a> </li> <li> <a href="https://websitedesign-usa.com/how-to-animate-the-details-element/">How to Stimulate the Information Component</a> </li> <li> <a href="https://websitedesign-usa.com/creative-ways-to-offer-memberships/">Imaginative Ways to Deal Subscriptions</a> </li> <li> <a href="https://websitedesign-usa.com/how-to-add-a-styled-inverted-cursor-to-your-divi-page/">How to Include a Styled & Inverted Cursor to Your Divi Page</a> </li> <li> <a href="https://websitedesign-usa.com/the-best-font-loading-strategies-and-how-to-execute-them/">The Best Font Loading Strategies and How to Execute Them</a> </li> </ul> </aside><aside id="categories-2" class="widget widget_categories"><span class="widget-title "><span>Categories</span></span><div class="is-divider small"></div> <ul> <li class="cat-item cat-item-5"><a href="https://websitedesign-usa.com/category/monthly-specials/">Monthly Specials</a> </li> <li class="cat-item cat-item-6"><a href="https://websitedesign-usa.com/category/search-engine-optimization/">Search Engine Optimization</a> </li> <li class="cat-item cat-item-1"><a href="https://websitedesign-usa.com/category/uncategorized/">Uncategorized</a> </li> <li class="cat-item cat-item-8"><a href="https://websitedesign-usa.com/category/website-design/">Website Design</a> </li> <li class="cat-item cat-item-9"><a href="https://websitedesign-usa.com/category/website-development/">Website Development</a> </li> <li class="cat-item cat-item-10"><a href="https://websitedesign-usa.com/category/wordpress/">WordPress</a> </li> </ul> </aside><aside id="archives-2" class="widget widget_archive"><span class="widget-title "><span>Archives</span></span><div class="is-divider small"></div> <ul> <li><a href='https://websitedesign-usa.com/2021/03/'>March 2021</a></li> <li><a href='https://websitedesign-usa.com/2021/02/'>February 2021</a></li> <li><a href='https://websitedesign-usa.com/2021/01/'>January 2021</a></li> <li><a href='https://websitedesign-usa.com/2020/12/'>December 2020</a></li> <li><a href='https://websitedesign-usa.com/2020/11/'>November 2020</a></li> <li><a href='https://websitedesign-usa.com/2020/10/'>October 2020</a></li> <li><a href='https://websitedesign-usa.com/2020/09/'>September 2020</a></li> <li><a href='https://websitedesign-usa.com/2020/08/'>August 2020</a></li> <li><a href='https://websitedesign-usa.com/2020/07/'>July 2020</a></li> <li><a href='https://websitedesign-usa.com/2020/06/'>June 2020</a></li> <li><a href='https://websitedesign-usa.com/2020/05/'>May 2020</a></li> <li><a href='https://websitedesign-usa.com/2020/04/'>April 2020</a></li> </ul> </aside><aside id="meta-2" class="widget widget_meta"><span class="widget-title "><span>Meta</span></span><div class="is-divider small"></div> <ul> <li><a href="https://websitedesign-usa.com/wp-login.php">Log in</a></li> <li><a href="https://websitedesign-usa.com/feed/">Entries feed</a></li> <li><a href="https://websitedesign-usa.com/comments/feed/">Comments feed</a></li> <li><a href="https://wordpress.org/">WordPress.org</a></li> </ul> </aside></div> </div> </div> </div> </main> <footer id="footer" class="footer-wrapper"> <!-- FOOTER 1 --> <!-- FOOTER 2 --> <div class="absolute-footer dark medium-text-center small-text-center"> <div class="container clearfix"> <div class="footer-secondary pull-right"> <div class="footer-text inline-block small-block"> <div align="center"><a href="https://www.veteranownedbusiness.com" target="_blank" ><img src="https://www.veteranownedbusiness.com/images/banner_links/VOB-Banner-Trade-Show-Border.jpg" alt="Proud Veteran Owned Business Member!" border="0px" /></a></div> </div> </div> <div class="footer-primary pull-left"> <div class="copyright-footer"> <img src="https://websitedesign-usa.com/wp-content/uploads/2020/03/Footer.png" width="150" height="45" alt=""/><h5>Copyright 2021 © Website Design U.S.A. <br><img src="https://websitedesign-usa.com/wp-content/uploads/2019/07/Designs-By-Heath-Arsenault.png" width="20" height="20" alt=""/><a href="https://websitedesign-usa.com/" title="Design By Heath Arsenault, Website Design U.S.A. - A Veteran Owned Company" target="_blank"> Website Design U.S.A.</a></h5> </div> </div> </div> </div> <a href="#top" class="back-to-top button icon invert plain fixed bottom z-1 is-outline circle" id="top-link"><i class="icon-angle-up" ></i></a> </footer> </div> <div id="main-menu" class="mobile-sidebar no-scrollbar mfp-hide"> <div class="sidebar-menu no-scrollbar "> <ul class="nav nav-sidebar nav-vertical nav-uppercase"> <li class="html custom html_nav_position_text_top"><div align="center"><img src="https://websitedesign-usa.com/wp-content/uploads/2020/03/Veteran-Owned.png" width="202" height="60" alt=""/></div></li><li id="menu-item-908" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home menu-item-908"><a href="https://websitedesign-usa.com/">Home</a></li> <li id="menu-item-909" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-909"><a href="https://websitedesign-usa.com/design-services/">Design Services</a></li> <li id="menu-item-910" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-910"><a href="https://websitedesign-usa.com/get-a-quote/">Get A Free Quote</a></li> <li id="menu-item-912" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-912"><a href="https://websitedesign-usa.com/website-design-work-samples/">Website Design Work Samples</a></li> <li id="menu-item-911" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-911"><a href="https://websitedesign-usa.com/graphic-design-work-samples/">Graphic Design Work Samples</a></li> <li id="menu-item-1010" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1010"><a href="https://websitedesign-usa.com/about-heath-arsenault/">About Heath</a></li> <li id="menu-item-914" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-914"><a href="https://websitedesign-usa.com/client-training/">Client Training</a></li> <li id="menu-item-915" class="menu-item menu-item-type-post_type menu-item-object-page current_page_parent menu-item-915"><a href="https://websitedesign-usa.com/website-design-usa-news/">News</a></li> <li id="menu-item-916" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-916"><a href="https://websitedesign-usa.com/reviews/">Reviews</a></li> <li id="menu-item-917" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-917"><a href="https://websitedesign-usa.com/contact-website-design-usa/">Contact</a></li> <li class="header-contact-wrapper"> <ul id="header-contact" class="nav nav-divided nav-uppercase header-contact"> <li class=""> <a href="mailto:heath@websitedesign-usa.com" class="tooltip" title="heath@websitedesign-usa.com"> <i class="icon-envelop" style="font-size:16px;"></i> <span> Email </span> </a> </li> <li class=""> <a class="tooltip" title="M Thru F - 7:30 - 3:30 EST "> <i class="icon-clock" style="font-size:16px;"></i> <span>M Thru F - 7:30 - 3:30 EST</span> </a> </li> <li class=""> <a href="tel:207-333-2449" class="tooltip" title="207-333-2449"> <i class="icon-phone" style="font-size:16px;"></i> <span>207-333-2449</span> </a> </li> </ul> </li><li class="html header-social-icons ml-0"> <div class="social-icons follow-icons" ><a href="https://www.facebook.com/usawebsitedesign/" target="_blank" data-label="Facebook" rel="noopener noreferrer nofollow" class="icon plain facebook tooltip" title="Follow on Facebook"><i class="icon-facebook" ></i></a><a href="https://www.instagram.com/websitedesignusa/" target="_blank" rel="noopener noreferrer nofollow" data-label="Instagram" class="icon plain instagram tooltip" title="Follow on Instagram"><i class="icon-instagram" ></i></a><a href="https://twitter.com/Web_DesignUSA" target="_blank" data-label="Twitter" rel="noopener noreferrer nofollow" class="icon plain twitter tooltip" title="Follow on Twitter"><i class="icon-twitter" ></i></a><a href="https://www.linkedin.com/in/heatharsenault" target="_blank" rel="noopener noreferrer nofollow" data-label="LinkedIn" class="icon plain linkedin tooltip" title="Follow on LinkedIn"><i class="icon-linkedin" ></i></a></div></li><li class="header-newsletter-item has-icon"> <a href="#header-newsletter-signup" class="tooltip" title=""> <i class="icon-envelop"></i> <span class="header-newsletter-title"> NEWSLETTER </span> </a> </li><li class="html header-button-1"> <div class="header-button"> <a rel="noopener noreferrer" href="https://www.paypal.com/ppcreditapply/da/us/lander?p=ppcdalpBAUNI&t=ppcdaltPPCSEM&gclid=EAIaIQobChMI5fGwkKO46AIVCJSzCh0tgwDuEAAYASAAEgJlLPD_BwE&gclsrc=aw.ds" target="_blank" class="button alert is-small" style="border-radius:99px;"> <span>Apply For Financing</span> </a> </div> </li> <li class="html custom html_top_right_text"><img src="https://websitedesign-usa.com/wp-content/uploads/2020/03/Footer.png" width="150" height="45" alt=""/></li> </ul> </div> </div> <script type='text/javascript' src='https://websitedesign-usa.com/wp-content/plugins/anti-spam/assets/js/anti-spam.js?ver=7.2.5' id='anti-spam-script-js'></script> <script type='text/javascript' src='https://websitedesign-usa.com/wp-content/themes/flatsome/inc/extensions/flatsome-live-search/flatsome-live-search.js?ver=3.13.1' id='flatsome-live-search-js'></script> <script type='text/javascript' src='https://websitedesign-usa.com/wp-content/plugins/official-mailerlite-sign-up-forms/assets/js/jquery.validate.min.js?ver=5.6.2' id='jquery-validation-plugin-js'></script> <script type='text/javascript' src='https://websitedesign-usa.com/wp-includes/js/hoverIntent.min.js?ver=1.8.1' id='hoverIntent-js'></script> <script type='text/javascript' id='flatsome-js-js-extra'> /* <![CDATA[ */ var flatsomeVars = {"ajaxurl":"https:\/\/websitedesign-usa.com\/wp-admin\/admin-ajax.php","rtl":"","sticky_height":"70","lightbox":{"close_markup":"<button title=\"%title%\" type=\"button\" class=\"mfp-close\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"28\" height=\"28\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"feather feather-x\"><line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"><\/line><line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"><\/line><\/svg><\/button>","close_btn_inside":false},"user":{"can_edit_pages":false},"i18n":{"mainMenu":"Main Menu"},"options":{"cookie_notice_version":"1"}}; /* ]]> */ </script> <script type='text/javascript' src='https://websitedesign-usa.com/wp-content/themes/flatsome/assets/js/flatsome.js?ver=3.13.1' id='flatsome-js-js'></script> <script type='text/javascript' src='https://websitedesign-usa.com/wp-content/themes/flatsome/inc/extensions/flatsome-lazy-load/flatsome-lazy-load.js?ver=3.13.1' id='flatsome-lazy-js'></script> <script type='text/javascript' src='https://websitedesign-usa.com/wp-includes/js/comment-reply.min.js?ver=5.6.2' id='comment-reply-js'></script> <script type='text/javascript' id='site-reviews-js-before'> window.hasOwnProperty("GLSR")||(window.GLSR={});GLSR.action="glsr_action";GLSR.ajaxpagination=["#wpadminbar",".site-navigation-fixed"];GLSR.ajaxurl="https://websitedesign-usa.com/wp-admin/admin-ajax.php";GLSR.nameprefix="site-reviews";GLSR.stars={"clearable":false,"tooltip":false};GLSR.urlparameter=true;GLSR.validationconfig={field:"glsr-field",form:"glsr-form",field_error:"glsr-field-is-invalid",field_message:"glsr-field-error",field_required:"glsr-required",field_valid:"glsr-field-is-valid",form_error:"glsr-form-is-invalid",form_message:"glsr-form-message",form_message_failed:"glsr-form-failed",form_message_success:"glsr-form-success",input_error:"glsr-is-invalid",input_valid:"glsr-is-valid"};GLSR.validationstrings={accepted:"This field must be accepted.",between:"This field value must be between %s and %s.",betweenlength:"This field must have between %s and %s characters.",email:"This field requires a valid e-mail address.",errors:"Please fix the submission errors.",max:"Maximum value for this field is %s.",maxlength:"This field allows a maximum of %s characters.",min:"Minimum value for this field is %s.",minlength:"This field requires a minimum of %s characters.",number:"This field requires a number.",required:"This field is required.",unsupported:"The review could not be submitted because this browser is too old. Please try again with a modern browser."}; </script> <script type='text/javascript' src='https://websitedesign-usa.com/wp-content/plugins/site-reviews/assets/scripts/site-reviews.js?ver=5.7.3' id='site-reviews-js'></script> <script type='text/javascript' src='https://websitedesign-usa.com/wp-includes/js/wp-embed.min.js?ver=5.6.2' id='wp-embed-js'></script> <div id="glsr-modal" class="glsr-modal" aria-hidden="true"> <div class="glsr-modal__overlay" data-glsr-close tabindex="-1"> <div class="glsr-modal__dialog" aria-modal="true" data-glsr-modal role="dialog"> <button class="glsr-modal__close" aria-label="Close modal" data-glsr-close></button> <div class="glsr-modal__content"></div> </div> </div> </div> </body> </html>