Question: Should SVG have alt?

The tag for an SVG should be brief, much like an alt attribute for an image. In the SVG tag, include an aria-labelledby attribute that points to the <title> tag.</p> <h2 id="can-svg-have-alt-text">Can SVG have alt text?</h2> <p>HTML5 now allows <b><svg> and <math> markup</b> with an HTML document without depending on external namespaces (decent overview here). Both have their own alt -attribute analogs (see below) which are effectively ignored by today’s screen-reader software.</p> <h2 id="when-should-you-not-use-alt">When should you not use alt?</h2> <p>Including alt text <b>for decorative images or items</b></p> <p> <b>Decorative items</b> such as dividers or design items that don’t provide additional context or content don’t need alt text. They don’t add to the information a user needs and they make little sense, or are unnecessary, when read with a screen reader.</p> <h2 id="is-image-alt-necessary">Is image alt necessary?</h2> <p>alt attribute is <b>required for <img> tags</b> if you want your markup to validate. Background images and bullets are just cosmetic, they don’t need an alternate representation as they are not part of the content.</p> <div style="text-align:center;"><div class="rll-youtube-player" data-src="https://www.youtube.com/embed/ZJSCl6XEdP8" data-id="ZJSCl6XEdP8" data-query=""></div><noscript><iframe width="560" height="315" src="https://www.youtube.com/embed/ZJSCl6XEdP8" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></noscript></div> <h2 id="should-svg-have-role-img">Should SVG have role IMG?</h2> <p>In terms of use with a screen reader, they are not adequate. Starting with the final SVG from the inline example, we <b>need to replace role=”img”</b> with role=”group” on the svg. … Then, add a class to hide the text visually, but keeping the content available for screen readers.</p> <div style="clear:both; margin-top:0em; margin-bottom:1em;"><a href="https://tinwhiskerz.com/building-planning/can-freecad-save-dxf-files.html" target="_self" rel="nofollow" class="u669953ebd014c6ec8368ae3878838a92"><!-- INLINE RELATED POSTS 1/3 //--><style> .u669953ebd014c6ec8368ae3878838a92 , .u669953ebd014c6ec8368ae3878838a92 .postImageUrl , .u669953ebd014c6ec8368ae3878838a92 .centered-text-area { min-height: 80px; position: relative; } .u669953ebd014c6ec8368ae3878838a92 , .u669953ebd014c6ec8368ae3878838a92:hover , .u669953ebd014c6ec8368ae3878838a92:visited , .u669953ebd014c6ec8368ae3878838a92:active { border:0!important; } .u669953ebd014c6ec8368ae3878838a92 .clearfix:after { content: ""; display: table; clear: both; } .u669953ebd014c6ec8368ae3878838a92 { display: block; transition: background-color 250ms; webkit-transition: background-color 250ms; width: 100%; opacity: 1; transition: opacity 250ms; webkit-transition: opacity 250ms; background-color: #1ABC9C; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17); -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17); -o-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17); -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17); } .u669953ebd014c6ec8368ae3878838a92:active , .u669953ebd014c6ec8368ae3878838a92:hover { opacity: 1; transition: opacity 250ms; webkit-transition: opacity 250ms; background-color: #F1C40F; } .u669953ebd014c6ec8368ae3878838a92 .centered-text-area { width: 100%; position: relative; } .u669953ebd014c6ec8368ae3878838a92 .ctaText { border-bottom: 0 solid #fff; color: #FFFFFF; font-size: 16px; font-weight: bold; margin: 0; padding: 0; text-decoration: underline; } .u669953ebd014c6ec8368ae3878838a92 .postTitle { color: #141414; font-size: 16px; font-weight: 600; margin: 0; padding: 0; width: 100%; } .u669953ebd014c6ec8368ae3878838a92 .ctaButton { background-color: #16A085!important; color: #FFFFFF; border: none; border-radius: 3px; box-shadow: none; font-size: 14px; font-weight: bold; line-height: 26px; moz-border-radius: 3px; text-align: center; text-decoration: none; text-shadow: none; width: 80px; min-height: 80px; background: url(https://tinwhiskerz.com/wp-content/plugins/intelly-related-posts/assets/images/simple-arrow.png)no-repeat; position: absolute; right: 0; top: 0; } .u669953ebd014c6ec8368ae3878838a92:hover .ctaButton { background-color: #F39C12!important; } .u669953ebd014c6ec8368ae3878838a92 .centered-text { display: table; height: 80px; padding-left: 18px; top: 0; } .u669953ebd014c6ec8368ae3878838a92 .u669953ebd014c6ec8368ae3878838a92-content { display: table-cell; margin: 0; padding: 0; padding-right: 108px; position: relative; vertical-align: middle; width: 100%; } .u669953ebd014c6ec8368ae3878838a92:after { content: ""; display: block; clear: both; } </style><div class="centered-text-area"><div class="centered-text" style="float: left;"><div class="u669953ebd014c6ec8368ae3878838a92-content"><span class="ctaText">IT IS INTERESTING:</span>  <span class="postTitle">Can FreeCAD save DXF files?</span></div></div></div><div class="ctaButton"></div></a></div><h2 id="how-do-i-make-svg-readable">How do I make SVG readable?</h2> <p>Text-to-speech browsers may not read your title and description tags in all circumstances. To ensure that they do, you can <b>add aria-labelledby and aria-describedby attributes in the <svg> element</b>. This will signal to the screen reader that there is more content that it should read.</p> <h2 id="how-important-is-alt-text-for-seo">How important is alt text for SEO?</h2> <p>How Does Alt Text Impact SEO? … Fundamentally, the purpose of alt text is <b>to improve accessibility by describing what an image is showing to visitors who do not have the ability to see them</b>. However, it also helps search engine crawlers and so improves SEO.</p> <h2 id="is-alt-text-a-legal-requirement">Is alt text a legal requirement?</h2> <p>We must provide alternative text for images, audio files, videos, and all other non-text elements published online. … When you use a graphic with legible text, <b>the alt text must contain the graphic’s exact text</b>. However, when possible, avoid using images of text or graphics with text.</p> <div style="text-align:center;"><div class="rll-youtube-player" data-src="https://www.youtube.com/embed/q_kLCc2gxLQ" data-id="q_kLCc2gxLQ" data-query=""></div><noscript><iframe width="560" height="315" src="https://www.youtube.com/embed/q_kLCc2gxLQ" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></noscript></div> <h2 id="what-is-alt-text-for-seo">What is alt text for SEO?</h2> <p>‘Alt text’ is a contraction of ‘alternative text’. It’s <b>a short written description of an image</b>, which makes sense of that image when it can’t be viewed for some reason. Well-written alt text is important to your website’s accessibility, and its search engine optimisation (SEO).</p> <h2 id="when-should-an-image-have-null-empty-alt">When should an image have null empty alt text alt?</h2> <p>Alt tags are used to describe the contents of images, but some images don’t convey any meaning and are therefore considered “decorative.” Decorative images do not need to be announced by the screen reader, so if the alt attribute is empty (alt=””, aka a “null” tag) <b>it will not be announced to the user</b>.</p> <div style="clear:both; margin-top:0em; margin-bottom:1em;"><a href="https://tinwhiskerz.com/building-planning/how-do-i-export-from-sldprt.html" target="_self" rel="nofollow" class="u7d13211b88f85ac46aadbc1bfcc65c1b"><!-- INLINE RELATED POSTS 2/3 //--><style> .u7d13211b88f85ac46aadbc1bfcc65c1b , .u7d13211b88f85ac46aadbc1bfcc65c1b .postImageUrl , .u7d13211b88f85ac46aadbc1bfcc65c1b .centered-text-area { min-height: 80px; position: relative; } .u7d13211b88f85ac46aadbc1bfcc65c1b , .u7d13211b88f85ac46aadbc1bfcc65c1b:hover , .u7d13211b88f85ac46aadbc1bfcc65c1b:visited , .u7d13211b88f85ac46aadbc1bfcc65c1b:active { border:0!important; } .u7d13211b88f85ac46aadbc1bfcc65c1b .clearfix:after { content: ""; display: table; clear: both; } .u7d13211b88f85ac46aadbc1bfcc65c1b { display: block; transition: background-color 250ms; webkit-transition: background-color 250ms; width: 100%; opacity: 1; transition: opacity 250ms; webkit-transition: opacity 250ms; background-color: #1ABC9C; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17); -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17); -o-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17); -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17); } .u7d13211b88f85ac46aadbc1bfcc65c1b:active , .u7d13211b88f85ac46aadbc1bfcc65c1b:hover { opacity: 1; transition: opacity 250ms; webkit-transition: opacity 250ms; background-color: #F1C40F; } .u7d13211b88f85ac46aadbc1bfcc65c1b .centered-text-area { width: 100%; position: relative; } .u7d13211b88f85ac46aadbc1bfcc65c1b .ctaText { border-bottom: 0 solid #fff; color: #FFFFFF; font-size: 16px; font-weight: bold; margin: 0; padding: 0; text-decoration: underline; } .u7d13211b88f85ac46aadbc1bfcc65c1b .postTitle { color: #141414; font-size: 16px; font-weight: 600; margin: 0; padding: 0; width: 100%; } .u7d13211b88f85ac46aadbc1bfcc65c1b .ctaButton { background-color: #16A085!important; color: #FFFFFF; border: none; border-radius: 3px; box-shadow: none; font-size: 14px; font-weight: bold; line-height: 26px; moz-border-radius: 3px; text-align: center; text-decoration: none; text-shadow: none; width: 80px; min-height: 80px; background: url(https://tinwhiskerz.com/wp-content/plugins/intelly-related-posts/assets/images/simple-arrow.png)no-repeat; position: absolute; right: 0; top: 0; } .u7d13211b88f85ac46aadbc1bfcc65c1b:hover .ctaButton { background-color: #F39C12!important; } .u7d13211b88f85ac46aadbc1bfcc65c1b .centered-text { display: table; height: 80px; padding-left: 18px; top: 0; } .u7d13211b88f85ac46aadbc1bfcc65c1b .u7d13211b88f85ac46aadbc1bfcc65c1b-content { display: table-cell; margin: 0; padding: 0; padding-right: 108px; position: relative; vertical-align: middle; width: 100%; } .u7d13211b88f85ac46aadbc1bfcc65c1b:after { content: ""; display: block; clear: both; } </style><div class="centered-text-area"><div class="centered-text" style="float: left;"><div class="u7d13211b88f85ac46aadbc1bfcc65c1b-content"><span class="ctaText">IT IS INTERESTING:</span>  <span class="postTitle">How do I export from Sldprt?</span></div></div></div><div class="ctaButton"></div></a></div><h2 id="can-svg-have-aria-label">Can SVG have aria label?</h2> <p>1 accessibility support is <b>limited</b> in browsers and screen readers. Things are set to improve with ARIA can be used now to improve the accessibility of simple SVG.</p> <h2 id="is-inline-svg-bad">Is inline SVG bad?</h2> <p>Inline SVGs would reduce the number of HTTP requests, so it should make the page load faster the first time someone’s visiting. But the drawback is that <b>your SVGs won’t be cached in the browser</b> and therefore it will have to be loaded every time.</p> <div style="text-align:center;"><div class="rll-youtube-player" data-src="https://www.youtube.com/embed/DmWWqogr_r8" data-id="DmWWqogr_r8" data-query=""></div><noscript><iframe width="560" height="315" src="https://www.youtube.com/embed/DmWWqogr_r8" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></noscript></div> <h2 id="do-screen-readers-read-svg">Do screen readers read SVG?</h2> <p><b>Yes, Screen readers can read an SVG as long as that screen reader has been coded to read a SVG</b>. SVGs have a number of accessibility tags which can be used and read by screen readers to describe what the SVG is representing or is meant to show.</p> </div><!-- .entry-content --> </article><!-- #post-## --> <div class="entry-footer"> </div> <div class="b-related"> <div class="b-related__items"> <div id="post-1736" class="post-card post-1736 post type-post status-publish format-standard category-building-planning"> <div class="post-card__image"> <a href="https://tinwhiskerz.com/building-planning/question-how-do-i-change-the-wall-pattern-in-revit.html"> <div class="thumb-wide"></div> <div class="entry-meta"> <span class="entry-category"><span>Building planning</span></span> <span class="entry-meta__info"> <span class="entry-meta__comments" title="Comments"><span class="fa fa-comment-o"></span> 0</span> </span> </div><!-- .entry-meta --> </a> </div> <header class="entry-header"> <div class="entry-title"><a href="https://tinwhiskerz.com/building-planning/question-how-do-i-change-the-wall-pattern-in-revit.html" rel="bookmark" >Question: How do I change the wall pattern in Revit?</a></div> </header><!-- .entry-header --> <div class="post-card__content"> How do you add a pattern to a wall in Revit? Use the Fill </div><!-- .entry-content --> </div><!-- #post-## --> <div id="post-1737" class="post-card post-1737 post type-post status-publish format-standard category-building-planning"> <div class="post-card__image"> <a href="https://tinwhiskerz.com/building-planning/best-answer-how-do-i-stretch-a-3d-model-in-autocad.html"> <div class="thumb-wide"></div> <div class="entry-meta"> <span class="entry-category"><span>Building planning</span></span> <span class="entry-meta__info"> <span class="entry-meta__comments" title="Comments"><span class="fa fa-comment-o"></span> 0</span> </span> </div><!-- .entry-meta --> </a> </div> <header class="entry-header"> <div class="entry-title"><a href="https://tinwhiskerz.com/building-planning/best-answer-how-do-i-stretch-a-3d-model-in-autocad.html" rel="bookmark" >Best answer: How do I stretch a 3D model in AutoCAD?</a></div> </header><!-- .entry-header --> <div class="post-card__content"> To make a 3D stretch, simply create a crossing window around the objects, then </div><!-- .entry-content --> </div><!-- #post-## --> <div id="post-1738" class="post-card post-1738 post type-post status-publish format-standard category-building-planning"> <div class="post-card__image"> <a href="https://tinwhiskerz.com/building-planning/what-companies-use-sketchup.html"> <div class="thumb-wide"></div> <div class="entry-meta"> <span class="entry-category"><span>Building planning</span></span> <span class="entry-meta__info"> <span class="entry-meta__comments" title="Comments"><span class="fa fa-comment-o"></span> 0</span> </span> </div><!-- .entry-meta --> </a> </div> <header class="entry-header"> <div class="entry-title"><a href="https://tinwhiskerz.com/building-planning/what-companies-use-sketchup.html" rel="bookmark" >What companies use SketchUp?</a></div> </header><!-- .entry-header --> <div class="post-card__content"> Company Name Website Sub Level Industry Department Of Agriculture usda.gov Government Wayfair wayfair.com General </div><!-- .entry-content --> </div><!-- #post-## --> <div id="post-1739" class="post-card post-1739 post type-post status-publish format-standard category-building-planning"> <div class="post-card__image"> <a href="https://tinwhiskerz.com/building-planning/how-do-i-import-a-pdf-into-autocad-dwg.html"> <div class="thumb-wide"></div> <div class="entry-meta"> <span class="entry-category"><span>Building planning</span></span> <span class="entry-meta__info"> <span class="entry-meta__comments" title="Comments"><span class="fa fa-comment-o"></span> 0</span> </span> </div><!-- .entry-meta --> </a> </div> <header class="entry-header"> <div class="entry-title"><a href="https://tinwhiskerz.com/building-planning/how-do-i-import-a-pdf-into-autocad-dwg.html" rel="bookmark" >How do I import a PDF into AutoCAD DWG?</a></div> </header><!-- .entry-header --> <div class="post-card__content"> Can AutoCAD import PDF to DWG? Thankfully Autodesk recognised this issue and added a </div><!-- .entry-content --> </div><!-- #post-## --> <div id="post-1719" class="post-card post-1719 post type-post status-publish format-standard category-building-planning"> <div class="post-card__image"> <a href="https://tinwhiskerz.com/building-planning/you-asked-how-do-i-change-the-scale-of-a-section-in-revit.html"> <div class="thumb-wide"></div> <div class="entry-meta"> <span class="entry-category"><span>Building planning</span></span> <span class="entry-meta__info"> <span class="entry-meta__comments" title="Comments"><span class="fa fa-comment-o"></span> 0</span> </span> </div><!-- .entry-meta --> </a> </div> <header class="entry-header"> <div class="entry-title"><a href="https://tinwhiskerz.com/building-planning/you-asked-how-do-i-change-the-scale-of-a-section-in-revit.html" rel="bookmark" >You asked: How do I change the scale of a section in Revit?</a></div> </header><!-- .entry-header --> <div class="post-card__content"> Why can’t I change scale in Revit? There are a few ways to deal </div><!-- .entry-content --> </div><!-- #post-## --> <div id="post-1735" class="post-card post-1735 post type-post status-publish format-standard category-building-planning"> <div class="post-card__image"> <a href="https://tinwhiskerz.com/building-planning/how-do-i-uninstall-a-solidworks-service-pack.html"> <div class="thumb-wide"></div> <div class="entry-meta"> <span class="entry-category"><span>Building planning</span></span> <span class="entry-meta__info"> <span class="entry-meta__comments" title="Comments"><span class="fa fa-comment-o"></span> 0</span> </span> </div><!-- .entry-meta --> </a> </div> <header class="entry-header"> <div class="entry-title"><a href="https://tinwhiskerz.com/building-planning/how-do-i-uninstall-a-solidworks-service-pack.html" rel="bookmark" >How do I uninstall a solidworks Service Pack?</a></div> </header><!-- .entry-header --> <div class="post-card__content"> How do I completely uninstall solidworks? Uninstalling SOLIDWORKS Open the Control Panel. … Navigate </div><!-- .entry-content --> </div><!-- #post-## --> </div> </div> <meta itemprop="author" content="SVadmin"> <meta itemprop="datePublished" content="2021-09-05T21:00:59+03:00"/> <meta itemscope itemprop="mainEntityOfPage" itemType="https://schema.org/WebPage" itemid="https://tinwhiskerz.com/building-planning/question-should-svg-have-alt.html" content="Question: Should SVG have alt?"> <meta itemprop="dateModified" content="2021-09-05"> <meta itemprop="datePublished" content="2021-09-05T21:00:59+03:00"> <div itemprop="publisher" itemscope itemtype="https://schema.org/Organization"><div itemprop="logo" itemscope itemtype="https://schema.org/ImageObject" style="display: none;"><img width="100" height="100" itemprop="url image" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20100%20100'%3E%3C/svg%3E" alt="All about design" data-lazy-src="https://tinwhiskerz.com/wp-content/uploads/2021/09/logo-304.jpg"><noscript><img width="100" height="100" itemprop="url image" src="https://tinwhiskerz.com/wp-content/uploads/2021/09/logo-304.jpg" alt="All about design"></noscript></div><meta itemprop="name" content="All about design"><meta itemprop="telephone" content="All about design"><meta itemprop="address" content="https://tinwhiskerz.com"></div> </main><!-- #main --> </div><!-- #primary --> </div><!-- micro --> <aside id="secondary" class="widget-area" itemscope itemtype="http://schema.org/WPSideBar"> <div id="search-2" class="widget widget_search"> <form role="search" method="get" id="searchform_8138" action="https://tinwhiskerz.com/" class="search-form"> <label class="screen-reader-text" for="s_8138">Search: </label> <input type="text" value="" name="s" id="s_8138" class="search-form__text"> <button type="submit" id="searchsubmit_8138" class="search-form__submit"></button> </form></div><div id="text-5" class="widget widget_text"><div class="widget-header">About the author</div> <div class="textwidget"><p><img class="size-full wp-image-94 alignleft" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20120%20120'%3E%3C/svg%3E" alt="" width="120" height="120" data-lazy-src="https://tinwhiskerz.com/wp-content/uploads/2021/09/logo-autor91.jpg" /><noscript><img class="size-full wp-image-94 alignleft" src="https://tinwhiskerz.com/wp-content/uploads/2021/09/logo-autor91.jpg" alt="" width="120" height="120" /></noscript>Design is an integral part of almost any construction: in most cases it is required by law, but even repairs in an apartment are difficult to carry out without a project. In this blog, I will try to highlight some of the design features in general, as well as the nuances of developing each profile section.</p> </div> </div><div id="wpshop_widget_articles-2" class="widget widget_wpshop_widget_articles"><div class="widget-articles"> <div class="widget-article widget-article--compact"> <div class="widget-article__body"> <div class="widget-article__title"><a href="https://tinwhiskerz.com/design-tips/how-can-an-architect-be-sustainable.html">How can an architect be sustainable?</a></div> </div> </div> <div class="widget-article widget-article--compact"> <div class="widget-article__body"> <div class="widget-article__title"><a href="https://tinwhiskerz.com/cad-software/your-question-can-you-mirror-in-onshape-assembly.html">Your question: Can you mirror in Onshape Assembly?</a></div> </div> </div> <div class="widget-article widget-article--compact"> <div class="widget-article__body"> <div class="widget-article__title"><a href="https://tinwhiskerz.com/design-tips/what-is-the-current-solidworks-service-pack.html">What is the current solidworks Service Pack?</a></div> </div> </div> <div class="widget-article widget-article--compact"> <div class="widget-article__body"> <div class="widget-article__title"><a href="https://tinwhiskerz.com/cad-software/how-do-i-draw-a-floor-plan-for-planning-permission.html">How do I draw a floor plan for planning permission?</a></div> </div> </div> <div class="widget-article widget-article--compact"> <div class="widget-article__body"> <div class="widget-article__title"><a href="https://tinwhiskerz.com/cad-software/how-do-you-use-history-in-solidworks.html">How do you use history in SOLIDWORKS?</a></div> </div> </div> <div class="widget-article widget-article--compact"> <div class="widget-article__body"> <div class="widget-article__title"><a href="https://tinwhiskerz.com/design-tips/how-do-i-move-a-visualize-in-solidworks.html">How do I move a visualize in Solidworks?</a></div> </div> </div> <div class="widget-article widget-article--compact"> <div class="widget-article__body"> <div class="widget-article__title"><a href="https://tinwhiskerz.com/cad-software/how-do-you-animate-in-autodesk.html">How do you animate in Autodesk?</a></div> </div> </div></div></div> </aside><!-- #secondary --> </div><!-- #content --> <div class="footer-navigation container"> <div class="main-navigation-inner "> <div class="menu-main-container"><ul id="footer_menu" class="menu"><li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-7175"><a href="https://tinwhiskerz.com/design-tips">Design Tips</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-7176"><a href="https://tinwhiskerz.com/cad-software">CAD software</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category current-post-ancestor current-menu-parent current-post-parent menu-item-7177"><a href="https://tinwhiskerz.com/building-planning">Building planning</a></li> </ul></div> </div> </div> <footer class="site-footer container" itemscope itemtype="http://schema.org/WPFooter"> <div class="site-footer-inner "> <div class="footer-info"> © 2021 All about design <div class="footer-text"><p><a href="https://tinwhiskerz.com/contact">Contacts</a> | <a href="https://tinwhiskerz.com/about-us">About us</a> | <a href="https://tinwhiskerz.com/policy">Privacy Policy & Cookies</a></p> <p> ATTENTION TO RIGHT HOLDERS! All materials are posted on the site strictly for informational and educational purposes! If you think that the posting of any material infringes your copyright, be sure to contact us through the contact form and your material will be removed! </p></div> </div><!-- .site-info --> </div><!-- .site-footer-inner --> </footer><!-- .site-footer --> <button type="button" class="scrolltop js-scrolltop" data-mob="on"></button> </div><!-- #page --> <script type="rocketlazyloadscript">var pseudo_links = document.querySelectorAll(".pseudo-clearfy-link");for (var i=0;i<pseudo_links.length;i++ ) { pseudo_links[i].addEventListener("click", function(e){ window.open( e.target.getAttribute("data-uri") ); }); }</script><!-- Код RB <script type="rocketlazyloadscript" data-rocket-type="text/javascript"> rbConfig={start:performance.now(),rbDomain:"www.takidd.site",rotator:'1iqw4'};</script> <script type="rocketlazyloadscript" async="async" data-rocket-type="text/javascript" src="//www.takidd.site/1iqw4.min.js"></script> --> <!-- Yandex.Metrika counter --> <script type="rocketlazyloadscript" data-rocket-type="text/javascript" > (function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)}; m[i].l=1*new Date();k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)}) (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym"); ym(84930862, "init", { clickmap:true, trackLinks:true, accurateTrackBounce:true }); </script> <noscript><div><img src="https://mc.yandex.ru/watch/84930862" style="position:absolute; left:-9999px;" alt="" /></div></noscript> <!-- /Yandex.Metrika counter --><script type="rocketlazyloadscript">document.addEventListener("copy", (event) => {var pagelink = "\nИсточник: https://tinwhiskerz.com/building-planning/question-should-svg-have-alt.html";event.clipboardData.setData("text", document.getSelection() + pagelink);event.preventDefault();});</script><script type="rocketlazyloadscript" data-rocket-type='text/javascript' id='rocket-browser-checker-js-after'> "use strict";var _createClass=function(){function defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||!1,descriptor.configurable=!0,"value"in descriptor&&(descriptor.writable=!0),Object.defineProperty(target,descriptor.key,descriptor)}}return function(Constructor,protoProps,staticProps){return protoProps&&defineProperties(Constructor.prototype,protoProps),staticProps&&defineProperties(Constructor,staticProps),Constructor}}();function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor))throw new TypeError("Cannot call a class as a function")}var RocketBrowserCompatibilityChecker=function(){function RocketBrowserCompatibilityChecker(options){_classCallCheck(this,RocketBrowserCompatibilityChecker),this.passiveSupported=!1,this._checkPassiveOption(this),this.options=!!this.passiveSupported&&options}return _createClass(RocketBrowserCompatibilityChecker,[{key:"_checkPassiveOption",value:function(self){try{var options={get passive(){return!(self.passiveSupported=!0)}};window.addEventListener("test",null,options),window.removeEventListener("test",null,options)}catch(err){self.passiveSupported=!1}}},{key:"initRequestIdleCallback",value:function(){!1 in window&&(window.requestIdleCallback=function(cb){var start=Date.now();return setTimeout(function(){cb({didTimeout:!1,timeRemaining:function(){return Math.max(0,50-(Date.now()-start))}})},1)}),!1 in window&&(window.cancelIdleCallback=function(id){return clearTimeout(id)})}},{key:"isDataSaverModeOn",value:function(){return"connection"in navigator&&!0===navigator.connection.saveData}},{key:"supportsLinkPrefetch",value:function(){var elem=document.createElement("link");return elem.relList&&elem.relList.supports&&elem.relList.supports("prefetch")&&window.IntersectionObserver&&"isIntersecting"in IntersectionObserverEntry.prototype}},{key:"isSlowConnection",value:function(){return"connection"in navigator&&"effectiveType"in navigator.connection&&("2g"===navigator.connection.effectiveType||"slow-2g"===navigator.connection.effectiveType)}}]),RocketBrowserCompatibilityChecker}(); </script> <script type='text/javascript' id='rocket-preload-links-js-extra'> /* <![CDATA[ */ var RocketPreloadLinksConfig = {"excludeUris":"\/(.+\/)?feed\/?.+\/?|\/(?:.+\/)?embed\/|\/(index\\.php\/)?wp\\-json(\/.*|$)|\/wp-admin|\/logout|\/qa_sitess","usesTrailingSlash":"","imageExt":"jpg|jpeg|gif|png|tiff|bmp|webp|avif","fileExt":"jpg|jpeg|gif|png|tiff|bmp|webp|avif|php|pdf|html|htm","siteUrl":"https:\/\/tinwhiskerz.com","onHoverDelay":"100","rateThrottle":"3"}; /* ]]> */ </script> <script type="rocketlazyloadscript" data-rocket-type='text/javascript' id='rocket-preload-links-js-after'> (function() { "use strict";var r="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},e=function(){function i(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}return function(e,t,n){return t&&i(e.prototype,t),n&&i(e,n),e}}();function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var t=function(){function n(e,t){i(this,n),this.browser=e,this.config=t,this.options=this.browser.options,this.prefetched=new Set,this.eventTime=null,this.threshold=1111,this.numOnHover=0}return e(n,[{key:"init",value:function(){!this.browser.supportsLinkPrefetch()||this.browser.isDataSaverModeOn()||this.browser.isSlowConnection()||(this.regex={excludeUris:RegExp(this.config.excludeUris,"i"),images:RegExp(".("+this.config.imageExt+")$","i"),fileExt:RegExp(".("+this.config.fileExt+")$","i")},this._initListeners(this))}},{key:"_initListeners",value:function(e){-1<this.config.onHoverDelay&&document.addEventListener("mouseover",e.listener.bind(e),e.listenerOptions),document.addEventListener("mousedown",e.listener.bind(e),e.listenerOptions),document.addEventListener("touchstart",e.listener.bind(e),e.listenerOptions)}},{key:"listener",value:function(e){var t=e.target.closest("a"),n=this._prepareUrl(t);if(null!==n)switch(e.type){case"mousedown":case"touchstart":this._addPrefetchLink(n);break;case"mouseover":this._earlyPrefetch(t,n,"mouseout")}}},{key:"_earlyPrefetch",value:function(t,e,n){var i=this,r=setTimeout(function(){if(r=null,0===i.numOnHover)setTimeout(function(){return i.numOnHover=0},1e3);else if(i.numOnHover>i.config.rateThrottle)return;i.numOnHover++,i._addPrefetchLink(e)},this.config.onHoverDelay);t.addEventListener(n,function e(){t.removeEventListener(n,e,{passive:!0}),null!==r&&(clearTimeout(r),r=null)},{passive:!0})}},{key:"_addPrefetchLink",value:function(i){return this.prefetched.add(i.href),new Promise(function(e,t){var n=document.createElement("link");n.rel="prefetch",n.href=i.href,n.onload=e,n.onerror=t,document.head.appendChild(n)}).catch(function(){})}},{key:"_prepareUrl",value:function(e){if(null===e||"object"!==(void 0===e?"undefined":r(e))||!1 in e||-1===["http:","https:"].indexOf(e.protocol))return null;var t=e.href.substring(0,this.config.siteUrl.length),n=this._getPathname(e.href,t),i={original:e.href,protocol:e.protocol,origin:t,pathname:n,href:t+n};return this._isLinkOk(i)?i:null}},{key:"_getPathname",value:function(e,t){var n=t?e.substring(this.config.siteUrl.length):e;return n.startsWith("/")||(n="/"+n),this._shouldAddTrailingSlash(n)?n+"/":n}},{key:"_shouldAddTrailingSlash",value:function(e){return this.config.usesTrailingSlash&&!e.endsWith("/")&&!this.regex.fileExt.test(e)}},{key:"_isLinkOk",value:function(e){return null!==e&&"object"===(void 0===e?"undefined":r(e))&&(!this.prefetched.has(e.href)&&e.origin===this.config.siteUrl&&-1===e.href.indexOf("?")&&-1===e.href.indexOf("#")&&!this.regex.excludeUris.test(e.href)&&!this.regex.images.test(e.href))}}],[{key:"run",value:function(){"undefined"!=typeof RocketPreloadLinksConfig&&new n(new RocketBrowserCompatibilityChecker({capture:!0,passive:!0}),RocketPreloadLinksConfig).init()}}]),n}();t.run(); }()); </script> <script type="rocketlazyloadscript" data-minify="1" src='https://tinwhiskerz.com/wp-content/cache/min/1/wp-content/themes/root/js/lightbox.js?ver=1630866270' id='root-lightbox-js' defer></script> <script type='text/javascript' id='root-scripts-js-extra'> /* <![CDATA[ */ var settings_array = {"rating_text_average":"average","rating_text_from":"from","lightbox_enabled":""}; var wps_ajax = {"url":"https:\/\/tinwhiskerz.com\/wp-admin\/admin-ajax.php","nonce":"9aad23547f"}; /* ]]> */ </script> <script type="rocketlazyloadscript" src='https://tinwhiskerz.com/wp-content/themes/root/js/scripts.min.js' id='root-scripts-js' defer></script> <script type='text/javascript' id='q2w3_fixed_widget-js-extra'> /* <![CDATA[ */ var q2w3_sidebar_options = [{"sidebar":"sidebar-1","margin_top":10,"margin_bottom":0,"stop_id":"","screen_max_width":0,"screen_max_height":0,"width_inherit":false,"refresh_interval":1500,"window_load_hook":false,"disable_mo_api":false,"widgets":["ai_widget-2"]}]; /* ]]> */ </script> <script type="rocketlazyloadscript" src='https://tinwhiskerz.com/wp-content/plugins/q2w3-fixed-widget/js/q2w3-fixed-widget.min.js' id='q2w3_fixed_widget-js' defer></script> <script>window.lazyLoadOptions={elements_selector:"img[data-lazy-src],.rocket-lazyload,iframe[data-lazy-src]",data_src:"lazy-src",data_srcset:"lazy-srcset",data_sizes:"lazy-sizes",class_loading:"lazyloading",class_loaded:"lazyloaded",threshold:300,callback_loaded:function(element){if(element.tagName==="IFRAME"&&element.dataset.rocketLazyload=="fitvidscompatible"){if(element.classList.contains("lazyloaded")){if(typeof window.jQuery!="undefined"){if(jQuery.fn.fitVids){jQuery(element).parent().fitVids()}}}}}};window.addEventListener('LazyLoad::Initialized',function(e){var lazyLoadInstance=e.detail.instance;if(window.MutationObserver){var observer=new MutationObserver(function(mutations){var image_count=0;var iframe_count=0;var rocketlazy_count=0;mutations.forEach(function(mutation){for(i=0;i<mutation.addedNodes.length;i++){if(typeof mutation.addedNodes[i].getElementsByTagName!=='function'){continue} if(typeof mutation.addedNodes[i].getElementsByClassName!=='function'){continue} images=mutation.addedNodes[i].getElementsByTagName('img');is_image=mutation.addedNodes[i].tagName=="IMG";iframes=mutation.addedNodes[i].getElementsByTagName('iframe');is_iframe=mutation.addedNodes[i].tagName=="IFRAME";rocket_lazy=mutation.addedNodes[i].getElementsByClassName('rocket-lazyload');image_count+=images.length;iframe_count+=iframes.length;rocketlazy_count+=rocket_lazy.length;if(is_image){image_count+=1} if(is_iframe){iframe_count+=1}}});if(image_count>0||iframe_count>0||rocketlazy_count>0){lazyLoadInstance.update()}});var b=document.getElementsByTagName("body")[0];var config={childList:!0,subtree:!0};observer.observe(b,config)}},!1)</script><script data-no-minify="1" async src="https://tinwhiskerz.com/wp-content/plugins/wp-rocket/assets/js/lazyload/16.1/lazyload.min.js"></script><script>function lazyLoadThumb(e){var t='<img loading="lazy" data-lazy-src="https://i.ytimg.com/vi/ID/hqdefault.jpg" alt="" width="480" height="360"><noscript><img src="https://i.ytimg.com/vi/ID/hqdefault.jpg" alt="" width="480" height="360"></noscript>',a='<div class="play"></div>';return t.replace("ID",e)+a}function lazyLoadYoutubeIframe(){var e=document.createElement("iframe"),t="ID?autoplay=1";t+=0===this.dataset.query.length?'':'&'+this.dataset.query;e.setAttribute("src",t.replace("ID",this.dataset.src)),e.setAttribute("frameborder","0"),e.setAttribute("allowfullscreen","1"),e.setAttribute("allow", "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"),this.parentNode.replaceChild(e,this)}document.addEventListener("DOMContentLoaded",function(){var e,t,a=document.getElementsByClassName("rll-youtube-player");for(t=0;t<a.length;t++)e=document.createElement("div"),e.setAttribute("data-id",a[t].dataset.id),e.setAttribute("data-query", a[t].dataset.query),e.setAttribute("data-src", a[t].dataset.src),e.innerHTML=lazyLoadThumb(a[t].dataset.id),e.onclick=lazyLoadYoutubeIframe,a[t].appendChild(e)});</script> <script type="rocketlazyloadscript">"use strict";var wprRemoveCPCSS=function wprRemoveCPCSS(){var elem;document.querySelector('link[data-rocket-async="style"][rel="preload"]')?setTimeout(wprRemoveCPCSS,200):(elem=document.getElementById("rocket-critical-css"))&&"remove"in elem&&elem.remove()};window.addEventListener?window.addEventListener("load",wprRemoveCPCSS):window.attachEvent&&window.attachEvent("onload",wprRemoveCPCSS);</script><noscript><link rel='stylesheet' id='google-fonts-css' href='https://fonts.googleapis.com/css?family=Roboto%3A400%2C400i%2C700&subset=cyrillic&display=swap' media='all' /><link data-minify="1" rel='stylesheet' id='root-style-css' href='https://tinwhiskerz.com/wp-content/cache/min/1/wp-content/themes/root/css/style.min.css?ver=1630866270' media='all' /><link rel='stylesheet' id='root-style-child-css' href='https://tinwhiskerz.com/wp-content/themes/root_child/style.css' media='all' /></noscript></body> </html> <!-- This website is like a Rocket, isn't it? Performance optimized by WP Rocket. Learn more: https://wp-rocket.me - Debug: cached@1631439896 -->